Babel Polyfill 적용하는 방법들

babel은 기본적으로 es6(ecma2015) 문법으로 작성한 코드를 es5 환경에서 동작할 수 있도록 문법적인 변환을 해주지만

es5에 존재하지 않는 es6의 메서드나 생성자들까지 지원해주지는 않는다.

 

그래서 es5로 동작하는 하위 브라우저를 지원하는 서비스를 개발할 때에는 폴리필을 추가하여 개발 편의성을 향상시킬 수 있다.

 

폴리필을 추가하는 방법은 다양한데 대표적인 몇가지 방법을 소개한다.

전역에 폴리필 추가하기 (전역 오염 O)

babel 7.4.0 이후부터 @babel/polyfill이 deprecated 되고

core-js와 regenerator-runtime을 직접 사용하는 방식을 제안하고 있다.

@babel/polyfill Deprecated 안내(https://www.npmjs.com/package/@babel/polyfill)

아래처럼 2개의 스크립트를 불러오면 전역 스코프에 폴리필이 추가되어

IE 하위 브라우저에서도 Promise, Map, Set, Object.assign, Array.find 등의 메서드를 자연스럽게 사용할 수 있다.

<script src="https://unpkg.com/core-js-bundle@3.1.4/index.js"></script>
<script src="https://unpkg.com/regenerator-runtime@0.13.3/runtime.js"></script>

Webpack 번들에 포함하고 전역에 폴리필 추가하기 (전역 오염 O)

entry 파일에서 아래와 같이 import만 해주면

전역 스코프에 폴리필을 추가하는 코드가 함께 번들링 된다.

npm install --save core-js regenerator-runtime

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

Webpack 번들에 포함하고 번들 내부에 가두기 (전역 오염 X)

@babel/plugin-transform-runtime을 사용하면 실제로 코드에서 사용한 폴리필 메서드만 번들에 포함된다.

현재 시점에서 전역을 오염시키지 않는 가장 바람직한 방법이라고 생각된다.

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime @babel/runtime-corejs3

의존 모듈 설치 후 Webpack Config에 아래와 같이 Plugins 설정을 추가한다.

{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "absoluteRuntime": false,
        "corejs": 3,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
}

위 내용은 corejs 3 사용을 기준으로 작성한 예제이며

옵션에 대한 자세한 설명은 https://babeljs.io/docs/en/babel-plugin-transform-runtime에서 확인할 수 있다.