1. 简介

默认情况下，在babel编译过程中会插入一些辅助代码来实现一些语法。并且是每个文件都会插入。存在重复代码。
我们可以借助@babel/runtime和@babel/plugin-transform-runtime来减少这些代码。

• @babel/runtime包含了 regenerator(实现生成器语法)，和其他helper方法
• @babel/plugin-transform-runtime用在编译时的插件，将辅助代码改成从@babel/runtime import helper代码

2. Pollyfill

他们支持pollyfill功能（默认关闭）， 与preset-env不同的是，它们以import的方式引入pollyfill，不会出现原型链污染问题（更适合库开发）。

注意, 如果你打算用它的pollyfill，需要配置corejs(默认关，可选配置是2和3)，同时需要将@babel/runtime改成@babel/runtime-corejs2或@babel/runtime-corejs3

2.1. 缺点

2.1.1. 无脑编译

对于

const a = {
	replaceAll: () => '1',
};

a.replaceAll();

会编译成

import _replaceAllInstanceProperty from "@babel/runtime-corejs3/core-js/instance/replace-all";
var a = {
  replaceAll: function replaceAll() {
    return '1';
  }
};

_replaceAllInstanceProperty(a).call(a);

js 无法知晓a的类型，只会无脑编译。

3. 配置

3.1. corejs

默认关，可配置2,3，分别代表使用corejs2和3
注意：corejs2 不支持内建api，如''.replaceAll()

3.2. helpers

是否开启helper方法导入，默认开

3.3. version

runtime的版本。默认是7.0.0
一些helper的引入是有版本要求 babel/helpers.ts

推荐配置成当前安装的版本, 例如你安装了@babel/[email protected] , 就配置成^7.7.4 这样可以减少编译后应用的大小.

4. 实战

简单配置，项目会享受到babel helper代码减少的优势

{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "version": "^7.7.4"
      }
    ]
  ]
}

4.1. pollyfill

需要安装@babel/runtime-corejs3，需要关闭preset-env的pollyfill。

{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "version": "^7.7.4",
        "corejs": 3
      }
    ]
  ]
}