Babel 의 용도

babel은 자바스크립트 컴파일러다.
ES6 를 ES5 로 컴파일해서 구형 브라우저에서도 돌아갈 수 있게 해준다거나,
JSX 를 JS 로 컴파일해서 리액트를 js 로 변환시켜주기도한다.

바벨 사용법

babel doc 을 참고했다.

먼저 babel 을 설치해준다.

npm install --save-dev @babel/core @babel/cli @babel/preset-env

기본적으로 @babel/preset-env 을 사용해 컴파일할것이다.

먼저 babel.config.json 을 아래와 같이 설정해준다.
babel 은 실행되면서 프로젝트 루트에 있는 babel.config.json 이나 babel.config.js 에 들어가 여기에 설정된 세팅대로 실행한다.
그리고 중간에 소스 폴더 내부에 .babelrc 를 만나면, 해당 babelrc 의 내용이 전역에 존재하는 babel 설정을 덮어쓴다고 한다.
또한 다른 방법으로는 package.json 에 선언할 수도 있다.

babel.config.json

package.json

{
  ...
  "babel": {
    "presets": ["...."]
  },
  ...
}

컴파일 결과

아래 명령어로 원하는 파일을 컴파일 할 수 있다.

./node_modules/.bin/babel target_file -o new_file 

index.js

compiled_index.js