Polyfill 이란?

새로 추가된 전역 객체들(Promise, Map, ...)을 사용가능한 객체로 바꾸어주는 플러그인이다.
babel을 사용한다고 자바스크립트 최신 함수를 사용할 수 있는 건 아니다. babel은 문법을 변환해주는 역할만 할 뿐이다. polyfill은 프로그램이 처음에 시작될 때 현재 브라우저에서 지원하지 않는 함수( ES6+에서 새롭게 추가된 Promise, WeakMap와 같은 내장메소드나 Array.from, Object.assign와 같은 정적 메소드 )를 검사해서 각 코드 변환을 하는 역할을 한다.

babel과 polyfill 차이점

babel

• ES6+의 문법을 구형 브라우저에서도 작동할 수 있도록 변환해주는 것이다.
• Javascript 의 Syntax 가 아닌 것들을 Javascript 에서 사용할 수 있게 만들어 준다.
• 컴파일타임에 실행

polyfill

• ES6+에서 새롭게 추가된 객체들을 구형 브라우저에서도 작동할 수 있도록 변환해주는 것이다.
• Javascript 의 Syntax 로 읽히지만 정의되어 있지 않은 객체들을 정의해준다.
• 런타임에 실행

어떤 방법으로 적용할까?

babel-polyfill을 추가하거나 transform-runtime(core-js와 regenerator를 포함)을 해야한다.

→ @babel-polyfill의 경우는 상단에만 넣으면 되지만 파일크기가 크고, 전역변수가 오염된다. (deprecated)

→ @babel/plugin-transform-runtime을 사용하면 실제로 코드에서 사용한 폴리필 메서드만 번들에 포함되므로 전역변수가 오염되지 않는다.

→ core-js3 로써 @babel/polyfill의 전역 오염 문제와, @babel/plugin-transform-runtime의 인스턴스 메소드 문제를 모두 해결한다.

적용

👉 Webpack 번들에 포함하고 번들 내부에 가두기

플러그인 설치

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

아래와 같이 추가된다.

// .package.json

{
  ...
  "devDependencies": {
    ```jsx
// .package.json

{
  ...
  "devDependencies": {
    "@babel/plugin-transform-runtime": "^7.12.10",
  },
  "dependencies": {
    "@babel/runtime-corejs3": "^7.12.5",
  }
}
```e": "^7.12.10",
  },
  "dependencies": {
    "@babel/runtime-corejs3": "^7.12.5",
  }
}

바벨 설정 추가

1. @babel/plugin-transform-runtime 으로 트랜스파일링 된 코드가
2. 런타임에 corejs3를 사용하게 만든다.

// .babelrc

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

웹팩 설정 추가

// .next.config.js

webpack(config) {
    const originalEntry = config.entry;
    config.entry = async () => {
      const entries = await originalEntry();

      if (entries['main.js']) {
        entries['main.js'].unshift('./polyfill.js');
      }
      return entries;
    };
    config.resolve.modules.push(path.resolve('./'));
    return config;
  },

적용할 메소드 추가

map 이라는 메소드의 사용을 위해 polyfill을 설정했지만, 앞으로 es6중 다른 메소드들이 필요할 수 있으니 es6 전체를 추가한다.

// ./polyfill.js

import 'core-js/es6';