@babel/preset-env와 @babel/plugin-transform-runtime의 corejs 3 폴리필 비교

지난 포스팅(Babel Polyfill을 적용하는 방법들)에서

@babel/plugin-transform-runtime 플러그인에 corejs 옵션을 줘서 폴리필하는 방법을 소개했었는데

최근에 @babel/preset-env의 useBuiltIns, corejs 옵션으로도 폴리필을 적용할 수 있다는걸 알게 되어서

각 방법에 어떠한 차이가 있는지 간단히 조사해 보았다.

 

먼저 Promise 를 사용하는 코드를 작성했다.

class Controller {
  constructor() {
    new Promise(resolve => {
      setTimeout(resolve, 1000);
    })
    .then(() => {
      console.log("Complete!!", Promise);
    });
  }
}

그리고 각각의 방법을 적용한 결과를 확인해 보았다.

 

@babel/preset-env 적용하여 변환된 코드

var Controller = function Controller() {
  new Promise(function (resolve) {
    setTimeout(resolve, 1000);
  }).then(function () {
    console.log("Complete!!", Promise);
  });
};

Promise를 사용하는 코드가 그대로 있다.

 

@babel/plugin-transform-runtime 적용하여 변환된 코드

var Controller = function Controller() {
  new _promise["default"](function (resolve) {
    (0, _setTimeout2["default"])(resolve, 1000);
  }).then(function () {
    console.log("Complete!!", _promise["default"]);
  });
};

Promise를 사용하는 코드가 _promise로 변경되었다.

간단 정리

@babel/preset-env { useBuiltIns: “entry”, corejs: 3 }

- 폴리필 메서드들을 전역 스코프에 추가한다.

- deprecated 된 @babel/polyfill을 대체한다.

- 전역 오염 O

 

@babel/preset-env { useBuiltIns: “usage”, corejs: 3 }

- 사용된 폴리필 메서드만 전역 스코프에 추가한다.

- 전역 오염 O

 

@babel/plugin-transform-runtime { corejs: 3 }

- 사용된 폴리필 메서드만 포함시키고, 해당 폴리필 메서드를 사용하도록 원본 코드를 변경한다.

- 전역 오염 X

 

참고 문서

https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md#babelpreset-env

zloirock/core-js