02. 웹팩(Webpack) 바벨(babel) 연동

구버젼 IE/안드로이드에서 최신 JS를 사용할 수 있도록 도와주는 바벨을 셋팅해보자

기본셋팅 및 arrow function

arrow function을 일반 function으로 바꿔보겠다!

npm i babel-core babel-loader babel-plugin-transform-es2015-arrow-functions

npm i babel-cli -g

• .babelrc 생성

1
2
3

{
    "plugins": ["transform-es2015-arrow-functions"]
}

• src/main.js

1
2
3
4
5
6

require("./main.css");
require("./index.html");

var a = () => {
    console.log('하하!')
}

babel src/main.js 명령어 입력하면 converting 되는걸 볼 수 있음

• config/webpack.dev.js

1
2
3
4
5
6
7
8
9
10
11
12
13

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

webpack –config=config/webpack.dev.js

dist에서 변환된 내용을 확인할 수 있다!

Async Await(Promise) 적용

npm i babel-plugin-async-to-promises

• .babelrc

1
2
3
4
5
6

{
    "plugins": [
        "transform-es2015-arrow-functions",
        "async-to-promises"
    ]
}

• main.js

1
2
3
4
5
6
7

require("./main.css");
require("./index.html");

var a = async () => {
    await console.log('하하!')
    console.log('후후')
}

babel src/main.js

Promise 함수로 변환시키는 것을 볼 수 있다. 여기까지 해도, Promise를 지원하는 최신 브라우저에서는 동작하는데, IE11에서는 Promise를 이해하지 못한다. 그래서 polyfill을 적용해, Promise함수를 자동으로 삽입해주도록 해야한다.

npm i babel-polyfill

• config/webpack.dev.js

1
2
3
4
5

...
entry: {
    main: ["babel-polyfill", "./src/main.js"]
}
...

npm run dev

yarn dev 또는 webpack-dev-server –config=config/webpack.dev.js

main.js가 생성이 되었지만 용량이 꾀나 크다! [big]라고 나옴. polyfill은 모든 함수를 넣어주기 때문이다. 필요한 함수가 선별적으로 넣어주는 것이 가장 좋다!

1
2
3
4
5

...
  entry: {
      main: ["core-js/fn/promise", "./src/main.js"]
  }
...

babel 사용을 조금더 간편하게

babel을 매번 찾아 선언해주는 것은 번거로운일이다. 그래서 바벨을 preset을 제공해준다.

바로 babel-preset-env es2015, es2016, es2017 및 latest를 포함하고 있다.

http://babeljs.io/docs/plugins/

babel-stage 를 사용하면 JS 표준으로 채택되지 않은 문법도 사용할 수가 있다!

1
2
3
4
5
6
7
8
9
10
11
12
13
14

{
    "presets": [
        [
            "env",
            {
                "targets": {
                    // 브라우저 타겟을 설정
                    "browsers": ["last 2 versions"]
                },
                "debug": true // 어떤 바벨 플러그인이 적용됐는지 확인
            }
        ]
    ]
}

babel-runtime

babel-polyfill 대신에 babel-runtime을 활용할 수도 있다. polyfill이 전역에 최신 JS 함수를 추가하는 거라면, babel-rutime은 전역 스코프를 오염시키지 않으며, 모듈 단위로 최신JS 파일을 포함시킨다.

• 사용 시기

전역 스코프를 오염해서 안되는 경우

public 모듈 또는 가볍게 작동해야하는 라이브러리를 만들경우

• .babelrc

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

{
    "presets": [
        [
            "env",
            {
                "targets": {
                    "browsers": ["last 2 versions"]
                },
            
                "debug": true
            }
        ]
    ],
    "plugins": ["transform-runtime"]
}

• main.js

1
2
3
4
5
6
7
8
9
10
11

require("babel-runtime/regenerator")
require("./main.css");
require("./index.html");

var a = async (args) => {
    await console.log('하하!')
    console.log('후후')
    const {a, b} = args
}

a({a:1, b:2});

• webpack.dev.js 에서 설정했던 폴리필을 제거

1
2
3
4
5

...
	entry: {
      main: ["./src/main.js"]
  },
...

webpack -config=config/webpack.dev.js

babel-runtime에 대한 상세 설정은 아래 URL을 참조

https://babeljs.io/docs/plugins/transform-runtime/

Reference

https://www.udemy.com/webpack-beyond-the-basics

polyfill vs runtime : https://codersmind.com/babel-polyfill-babel-runtime-explained/

Comment and share