바벨의 Configuration과 Polyfill

필요에 의해 설정파일을 사용하는 몇개의 다른 방법이 있다. 어떻게 바벨을 설정하는지 더 원한다면 상세 가이드(configure Babel)를 참조해라

이제 babel.config.json이라는 파일을 아래와 같이 만들어보자

{
"presets": [
  [
  "@babel/env",
    {
      "targets": {
        "edge": "17",
        "firefox": "60",
        "chrome": "67",
        "safari": "11.1"
        }
      }
    ]
  ]
}

이제 env preset은 오직 우리의 타겟 브라우저에서 사용이 불가능한 기능에 대한 변환 플러그인만 불러온다. 이제 폴리필을 봐보자...

 

Polyffill

🚨 바벨 7.4.0부로 이 패키지(@babel/polyfill)는 권장되지 않고 core-js/stable과 regenerator-runtime/runtime을 직접 import (ECMAScripts 형식을 polyfill하기 위한)하도록 권장한다.

import "core-js/stable";
import "regenerator-runtime/runtime";

@babel/polyfill모듈은 모든 ES2015+환경을 맞추기 위해 core-js와 regenerator runtime을 포함한다.

 

이건 Promise나 WeakMap, array와 같은 static함수 같은 새로운 기능을 사용할 수 있음을 의미한다. ployfill은 string과 같은 native prototypes도 global에 추가한다.

 

라이브러리/툴의 제작자들에게 이건 좀 과할 수 있다. Array.prototype.includes와 같은 instance 함수를 원하지 않는다면 global scope를 오염시키지 않도록 @babel/polyfill 대신에 transform runtime 을 사용할 수 있다.

 

더 나아가서 어떻게 원하는 ployfill이 나타나는지 정확히 알고싶다면 core-js 이걸 참조하세요~!

 

설치 :

npm install --save @babel/polyfill

useBuiltIns옵션은 usage로 설정되었을 때 최적화를 각각 적용한다. 이 최적화는 필요한 polyfill만 포함할 수 있다는 식으로 위에서 언급 된 최적화이다. (언제...?)

새로운 옵션과 함께 아래처럼 변경해보자.

{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1",
        },
        "useBuiltIns": "usage",
      }
    ]
  ]
}

 

바벨은 타겟 환경에서 놓친것이 있는지 모든 코드를 점검하고 필요한 ployfill만 불러올거다. 예를들면

Promise.resolve().finally();

Edge17은 Promise.prototype.finally를 제공하지 않으므로 위의 코드를 아래처럼 변환한다.

require("core-js/modules/es.promise.finally");

Promise.resolve().finally();

env preset 의 'useBuiltIns'옵션을 'usage'로 설정하지 않는다면 코드에서 가장 먼저 polyfill을 해야만 했을 것이다.