Babel 설정

 

Babel

 

바벨(bable)은 최신의 자바스크립트 문법을 구형의 브라우저에도 동작할 수 있도록

ES5문법들으로 변환시키는 트랜스파일러이다.

 

이렇게 코드를 변환해줌으로써 개발자들이 실행 환경에 구애받지 않고

항상 최신 문법의 자바스크립트로 코딩을 할 수 있다.

 

babel은 단독으로도 사용할 수 있지만 보통 webpack과 같은 빌드 시스템과 함께 사용된다.

 

* 바벨은 ES5버전 이전 문법으로 변환하는 용도이며,

브라우저에 지원하지 않는 기능을 만들어 주는 것은 아니기 때문에

브라우저에 지원하지 않는 기능을 사용하려면 별도의 폴리필을 적용해야한다.

 

바벨 설치

바벨의 코어 패키지와 바벨을 터미널에서 동작시킬 수 있게 도와주는 babel cli을 설치한다.

npm i -D @babel/core @babel/cli

 

babel.config.json

루트 경로에 bebel.config.json파일을 추가해주고

바벨에서 어떤식으로 변환을 할 지 plugin을 등록하여 지정을 할 수 있다.

 

문법의 변환의 규칙을을 하나하나 세부적으로 조정할 수도 있지만

preset을 사용하여 plugin의 그룹을 한번에 설치해서 적용할 수 있다.

 

babel preset-env 설치

npm i -D @babel/preset-env

 

babel.config.json 설정

{
  "presets": ["@babel/preset-env"],
  // "plugins": [
  //   "@babel/plugin-transform-block-scoping"
  // ]
}

 

transform runtime 플러그인 추가

preset-env를 통해 코드를 변환하면 전역으로 등록이 되기 때문에
전역이 오염될 수 있기 때문에  transform runtime설치하여 전역을 오염시키지 않고
변환을 할 수 있다.

 

플러그인 설치

npm i -D @babel/plugin-transform-runtime @babel/runtime-corejs3

플러그인 적용

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "corejs":3,
    }]
  ]
}

corejs2버전은 includes 변환이 되지 않기 때문에 3버전으로 설정을 해준다.

 

browserslist 옵션 추가

package.json의 browerslist옵션을 추가하여 지원할 브라우저의 범위를 지정해 줄 수 있다.

프로젝트를 제공하려고 하는 대상의 브라우저를 적어준다.

  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "ie >= 11"
  ],

 

webpack 설정

webpack의 기본 설정이 되어있다는 가정 하에 babel loader를 설치해준다.

npm i babel-loader -D

 

loader 등록

package.json의 module의 rules에 loader를 등록해준다.

module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },