@babel/plugin-transform-runtime 공식 문서

바벨에 추가된 코드를 재사용해서 코드 크기를 줄일 수 있는 플러그인이다.

Installation

개발용을 설치해주자.

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

pr용이 필요하다면 이것도 설치해주자.

npm install --save @babel/runtime

Why?

Babel에서 사용되는 중복코드들이 @babel/plugin-transform-runtime 플러그인이 @babel/runtime 모듈을 참조해서 중복되지 않도록 처리해준다. 

Usage

With a configuration file(추천) - 옵션은 기본 값이다.

{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "absoluteRuntime": false,
        "corejs": false,
        "helpers": true,
        "regenerator": true,
        "version": "7.0.0-beta.0"
      }
    ]
  ]
}

CLI

babel --plugins @babel/plugin-transform-runtime script.js

Node API

require("@babel/core").transformSync("code", {
  plugins: ["@babel/plugin-transform-runtime"],
});

Options

  "plugins": [["@babel/plugin-transform-runtime",
    {
      // "polyfill": v7에서는 기본적으로 추가되도록 됨
      // "useBuiltIns": v7에서는 기본적으로 추가되도록 됨
      "corejs": false, 
      // 각자 필요한 버전을 지정하면 된다.
      // 2 : 글로벌 변수(Promise)와 정적 속성(ex. Array.from)을 지원
      // 3 : instance properites를 지원 - proposals : true옵션을 사용하여 polyfill 제안사항들을 polyfill할 수 있다.
      "helpers": true,
      // inlined Babel helper들이 moduleName과 함께 호출 할지 안 할지 결정한다.(ex. classCallCheck, extends)
      // babel이 사용하는 helper코드들이 불필요한 중복까지 추가될 수 있다. 이러한 것들을 대체할 지 여부에 대한 토글이다.
      "regenerator": true,
      // 현재 환경을 중복되어 오염시키는 코드들을 제거하기 위해서 사용된다.
      "useEsModules": false,
      // 7.13.0부터 제거된다.
      // commonJs 문법을 유지할 필요 없기 때문에 @babel/plugin-transform-modules-commonjs에서 실행되지 않는 helper들을 사용한다.
      // exports.default = function 이것이 export default function 이렇게 사용 가능해진다.
      "absoluteRuntime": false,
      // 변환 실행시간을 크게 가질 수 있다. 
      // 런타임에 대한 절대 경로를 미리 설정 한 후 출력코드를 삽입할 수 있다.
      // 파일이 컴파일된 다음 즉시 사용되는 상황에서 사용 할 수 있다.
      "version": "7.0.0-beta.0"
      // 더 높은 버전을 사용하고 싶다면, 설정하면 된다.
    }
  ]]