babel

2019-09-17
#babel, javascript, webpack

babel은 특정 버전 ECMAScript를 하위 버전 ECMAScript로 변환해주는 트랜스파일러다.
즉, es5 이상의 문법을 es5 지원 브라우저에서 해석할 수 있도록 해주는 트랜스파일러다.
(ES6+ 문법은 에버그린 브라우저만 지원하는 기능이기 때문에 구형 브라우저에서는 호환이 안되는 문제가 있는데
이를 babel이 해결해준다.)


babel-cli

먼저 @babel-cli을 설치한다. (babel7 버전부터는 @를 붙인다.)
@babel-cli는 트랜스파일을 진행하는 코어 기능만 있고 실제 코드 변환시에는 플러그인들이 필요하다.
예를 들어 화살표 함수를 사용하는데 화살표 함수를 트랜스파일할 수 있는 플러그인을 설치해야한다.
일일히 설치할 수 없으니 프리셋을 설치하여 해결할 수 있다.

1
npm install @babel-cli


babel-preset-env

프리셋과 플러그인들을 모와 관리하고 있는 모듈이다.
env로 설정하면 @babel-preset-latest로 현재 지원 가능한 가장 최식 버전의 프리셋을 사용 할 수 있다.
.babelrc에서 env에 맞는 target브라우저를 설정할 수 도 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// .babelrc 파일
{
  "preset": [
    ["env", {
      "targets": {
        "chrome": 52,
      }
    }]
  ]
}

// .babelrc 파일
{
  "preset": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "not ie <= 10"]
      }
    }]
  ]
}
`

배열형태로 지원 브라우저를 정의할 수 있다.

1
npm install @babel-preset-env


babelrc

.babelrc라는 파일명으로 프로젝트의 바벨 관련 설정을 등록할 수 있다.
package.json에서 babel이란 키로 설정을 추가할 수도 있지만 .babelrc을 쓰는게 더 좋은 것 같다.

1
2
3
4
5
6
7
8
9
10
11
{
      "presets": [
        ["env", {
           "targets": {
            "browsers": ["last 2 versions", "not ie <= 9"]
          }
        }]
      ],
      "plugins": ["transform-object-rest-spread"]
    }
`

타켓 브라우저를 설정할 수 있다.
또한 아직 정식버전에 포함되지 않는 스펙들은 plugin배열로 추가 가능하다.
(사용가능한 플러그인: https://babeljs.io/docs/en/plugins/)


babel-polyfill

babel을 사용해서 es6 코드를 에버그린 브라우저에서 사용가능하다.
그러나 IE8과 같은 구형브라우저에는 promise,map,set 등등 객체나 메소드 들이 없기 때문에 사용할 수 없다.
그래서 @babel/polyfill을 설치해야한다.

1
2
npm install @babel/polyfill
`

그리고 코드 최상단에 한번만 추가를 해야한다.

1
import '@babel/polyfill';

웹팩을 사용한다면 임포트를 하지 않고 entry에 적어도 된다.

1
2
3
4
// webpack.config.js
{
  entry: ['@babel/polyfill', './app.js'],
}


babel-loader

웹팩과 바벨을 연동할 수 있게 한다.

1
npm install @babel-loader

babel-loader를는 node_module에 있는 내용은 제외하고 적용된다.
또한 entry에서 babel-polyfill 설정도 가능하다.

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
module.exports = (env, options) => {
     const config = {
       entry: {
         app: ['babel-polyfill', './src/index.js']
       },
        module: {
         rules: [
           {
             test: /\.js$/,
             exclude: /node_modules/,
             use: {
               loader: 'babel-loader'
             }
           }
         ]
       },
       // .... 중략 ....
       optimization: {
         splitChunks: {
           cacheGroups: {
             commons: {
               test: /[\\/]node_modules[\\/]/,
               name: 'vendors',
               chunks: 'all'
             }
           }
         }
       }
     }
   }