폴리필을 써야 하는 이유

바벨의 플러그인인 es5로 변환할수 있는 것만 변경해준다. es5에 이미 존재 했었던 개념은 플러그인으로 변경이 가능하지만 ECMAScript2015+에서 새롭게 등장한 개념은 플러그인을 통해서 변경이 되지 않는다.
예를 들어 화살표 함수의 경우에는 일반 함수로 변경이 가능하지만, Promise같은 새로운 개념은 변경이 안된다.
그래서 이렇게 새롭게 등장한 개념에 대한 변경이 가능하도록 폴리필이라고 부르는 코드조각을 추가해서 해결하게 된다.
폴리필로 사용되는 것중 하나에 core-js가 존재한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// babel.config.js

module.exports = {
    presets: [
        ['@babel/preset-env', {
            targets: {
                chrome: 79,
                ie: 11
            },
            useBuiltIns: 'usage',    // 폴리필을 쓰겠다.
            corejs: {                // 폴리필로 corejs를 쓰겠다.
                version: 2
            }
        }]
    ]
}
  • useBuiltIns: 어떠한 방식으로 폴리필을 사용하지에 대한 옵션으로, value에 ‘usage’를 주면 코드상에서 사용이 되는 폴리필만 import 하도록 해준다.
  • corejs: 폴리필시에 사용되는 파일로써 version을 옵션으로 사용하고자 하는 버전을 선택가능하다.

웹팩에서 바벨 사용하기

실무환경에서는 바벨을 따로 사용하지 않고 웹팩을 통해서 사용하게 된다. 보통은 바벨은 로더 형태로 제공된다(babel-loader).

1
npm install -D babel-loader
1
2
3
4
5
{
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/     // node_modlues에도 js가 있어서 제외 시켜준다
}