regeneratorRuntime is not defined

문제 발생

video recorder를 만드는 과정에서 에러가 발생했다.

Uncaught ReferenceError: regeneratorRuntime is not defined

원인

Babel이 변환하지 못하는 새로 추가된 object(Promise, Map, Set...)나 method(String.padStart...)가 있어서 발생함.

해결

@babel/polyfill

모든 polyfill을 받아서 문제를 해결하는 방법이다.

장점

1. 전역공간에 polyfill을 추가하므로 새로 추가될 object나 method를 대부분 문제 없이 사용할 수 있다.

단점

1. 브라우저에서 구현되지 않은 문법만 babel-polyfill이 실행하기는 하지만 모든 polyfill을 받으므로 크기가 커진다.
2. 전역공간에 추가하므로 서로 충돌할 가능성이 있다.(전역 오염)

@babel/plugin-transform-runtime

polyfill이 필요한 경우, Babel 내부 helper 함수를 사용하도록 바꿔주는 plugin이다.

장점

1. 필요한 polyfill만 사용하므로 크기가 작아진다.
2. 전역 오염이 발생하지 않는다.

단점

1. 새로 추가된 object나 method가 전역 공간에 선언되었으면 매번 include를 사용해 명시해야 한다. 예를 들어, axios는 전역공간에 선언된 Promise가 있어야 제대로 동작하므로 아래와 같이 설정해줘야 한다.

// webpack

include: [
  /src\/js/,
  /node_modules\/axios/
],

2. "[1,2,3].includes"와 같은 인스턴스의 method는 제대로 변환되지 않는다.

core-js

기본적으로 Babel은 사용자 정의 regenerator runtime 과 core-js를 포함하는 polyfill을 가지고 있다. 이들을 정의하고 babel-node를 사용해주면 자동적으로 load된다. core-js를 정의해주자.

사용법

// webpack

presets: [
  [
    "@babel/preset-env",
    {
      corejs: 3,
      useBuiltIns: "usage",
      shippedProposals: true,
    },
  ],
],

필자는 webpack을 통해 js를 변환하므로 이렇게 했지만, babel.config.js에 corejs를 정의해도 된다.

useBuiltIns

@babel/preset-env이 어떻게 polyfill을 다룰지 정하는 option이다.

장점

1. plugin-transform-runtime이 가지는 장점을 모두 가진다.
2. plugin-transform-runtime의 단점 중 2번이 해결된다.

단점

1. plugin-transform-runtime의 단점 중 1번은 해결되지 않는다.

---

Reference

@babel/polyfill
@babel/plugin-transform-runtime
@babel/polyfill & @babel/plugin-transform-runtime
core-js
core-js