babel

babel은 자바스크립트 컴파일러다. 입력은 자바스크립트 코드고 출력도 자바스크립트 코드다. 최신 버전의 자바스크립트 문법은 브라우저가 이해하지 못하기 때문에 babel이 브라우저가 이해할 수 있는 문법으로 변환해준다. ES6, ES7 등의 최신 문법을  사용해서 코딩을 할 수 있기 때문에 생산성이 향상된다.

 

babel-polyfill

babel을  사용한다고 자바스크립트 최신 함수를 사용할 수 있는 건 아니다. 초기에 babel만 믿고 최신 함수를 사용했다가 브라우저에서 동작하지 않는 것을 보고 당황했었다. babel은 문법을 변환해주는 역할만 할 뿐이다. polyfill은 프로그램이 처음에 시작될 때 현재 브라우저에서 지원하지 않는 함수를 검사해서 각 object의 prototype에 붙여주는 역할을 한다. 즉, babel은 컴파일-타임에 실행되고 babel-polyfill은 런-타임에 실행된다.

 

babel-polyfill을 사용하고 싶다면 별도로 설정해줘야한다.

 

.babelrc

.babelrc파일을 프로젝트 root 폴더에 생성하자. plugins와 presets 속성이 중요하다. 위에서 설명했던 각 문법이 하나의 plugin(arrow function, class 문법 등)이라고  생각하면 된다. 그리고 presets은 plugin 여러 개가 묶여있는 개념이다. 대표적으로 ES6 문법을 모아놓은 es2015 preset과 react 문법을 모아놓은 react preset이 있다. 사용할 preset을 presets에 추가하고 presets에 속해있는 plugin 외에 추가로 사용하고  싶은 plugin은 plugins에 넣자.

babel-cli

보통은 webpack을 사용해서 빌드하겠지만 직접 cli로 빌드할 수도 있다.

 

원본 : https://medium.com/@ljs0705/babel-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-a1d0e6bd021a

Babel 이해하기