BABEL (2018.06.22)

What is babel?

• JavaScript Compiler ( mainly used to convert ES2015+ code )
• parsing, transforming, and generation

babel-cli

• command line을 통해 code를 transpile할 수 있는 도구

@babel/ployfill

- polyfill

• 특정 기능이 지원되지 않는 브라우저를 위해 사용할 수 있는 코드 조각 또는 플러그인

- @babel/polyfill

• polyfill들 ( includes custom regenerator runtime & core-js )을 사용하기 편리하게 랩핑해놓은 모듈
• 새로이 추가된 전역 객체들 & 전역 객체에 추가된 메소드들을 사용할 수 있도록 지원해준다 ( ES6환경을 제공해준다고 생각하면 편함 )
• webpack과 함께 사용한다면 module.export 시 entry point에 babel-polyfill을 추가해주면 된다

- Advantages

• core-js가 polyfill추가 전에 해당기능의 존재여부 체크 ( 최신 브라우저에서는 polyfill없이 동작한다 )

- Disadvantages

• 실제 사용하지 않는 polyfill도 전부 추가됨 (bundling하는 파일크기가 커진다)

- Install

• yarn add @babel/polyfill

/* Because this is a ployfill ( which will run before source code )

than we need it to be a dependency ( Not a devDependency) */

presets

- @babel/preset-react

• React code와 JSX문법을 트랜스파일링해줌

- @babel/preset-env

• without any configuration options, behaves same as babel-preset-lastest(or babel-preset-es2015,2016,2017 together)

- stage-X

• ex) babel-preset-stage-0,1,2,3,4(babel-preset-es2015)
• 숫자가 올라갈수록 완성형(4가 되면 다음 업데이트에 릴리즈됨)
• // 이제는 stage를 사용하지 않을 전망. 직접 사용하고 싶은 preset들을 install 해주어야 한다

- @babel/plugin-proposal-class-properties

- @babel/plugin-proposal-decorators

Configuring Babel

• babel에게 정보를 전달해주지 않는 한, babel은 아무 작업도 수행하지 않음
• .babelrc파일을 통해 babel에게 설정 정보를 전달해 주어야 함

- .babelrc

• “presets”와 “plugins”로 구성되어있음