«   2021/10   »
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            
Tags
more
Archives
Today
0
Total
243
관리 메뉴

개발블로그

BABEL (2018.06.22) 본문

BABEL (2018.06.22)

학교옆메추리 2020. 5. 28. 13:30

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”로 구성되어있음

'' 카테고리의 다른 글

JS prototype (2018.10.01)  (0) 2020.05.28
Redux (2018.06.30)  (0) 2020.05.28
Immutable.js (2018.06.26)  (0) 2020.05.28
CORS (2018.06.24)  (0) 2020.05.28
Webpack (2018.06.23)  (0) 2020.05.28
BABEL (2018.06.22)  (0) 2020.05.28
0 Comments
댓글쓰기 폼