OneYoung

Appearance

在上一章的结尾处，我们简单引出了 @babel/plugin-transform-runtime 。

它主要用来解决 @babel/polyfill 结合 preset-env 使用时出现的问题。

这一章我们详细介绍下它。

安装 ​

@babel/plugin-transform-runtime 是 babel 的一个插件。它通常需要结合 @babel/runtime 使用。

shell
yarn add @babel/plugin-transform-runtime -D

# 这个库可能不用手动安装 在安装上面插件时，babel可能会自动安装runtime这个库。另外由于是生产依赖，所以这里不加 '-D'
yarn add @babel/runtime

使用原因 ​

@babel/plugin-transform-runtime 用来替代 @babel/polyfill。它的主要优势有两个：

  1. 在转译的单个代码文件中，就会存在很多的 helper 工具函数，如果项目中多个文件转译，可想而知，会存在大量重复的 helper 工具函数，增大项目包体积。

@babel/plugin-transform-runtime 会将所有的 helper 工具函数统一从 @babel/runtime 库中引入。

  1. @babel/polyfill 会污染全局作用域，不利于在第三方库使用。

@babel/plugin-transform-runtime 会创建一个沙盒环境，保证代码环境不被污染。

使用方法 ​

因为 @babel/plugin-transform-runtime 是插件，所以直接用插件形式配置即可。以 babelrc 文件为例：

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

配置选项 ​

1.corejs ​

2, 3 or { version: 2 | 3, proposals: boolean }, defaults to 2

用来声明 @babel/plugin-transform-runtime 转译代码后的 core-js 版本。

该选项相当于替代 polyfill。设置后无需再使用 polyfill。会有对应版本的 @babel/runtime-corejs。

core-js@2 仅支持全局变量（例如 Promise ）和静态属性（例如 Array.from ）。

core-js@3 还支持实例属性 （例如 [].includes ）。

所以一般我们设置为 corejs: 3。

2.helpers ​

Boolean, defaults to true.

设置是否将 _asyncToGenerator、_classCallCheck、_createClass 等 helpers 转换成 模块化导入。

js
// polyfill下 是在文件头部声明一堆函数

// transform-runtime下设置 corejs: 3
import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
import _createClass from "@babel/runtime-corejs3/helpers/esm/createClass";

3.regenerator ​

Boolean, defaults to true.

设置是否将 _regeneratorRuntime 转换成 模块化导入。

js
// polyfill下 是一个全局变量

// transform-runtime下设置 corejs: 3
import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator"

@babel/runtime ​

当不设置 @babel/plugin-transform-runtime 的 corejs 选项时，默认会从 @babel/runtime 中导入 helpers 以及 regenerator。

注意：不设置 corejs 时，转译后的代码类同于设置 corejs: 2。不支持实例属性。

js
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

@babel/runtime-corejs2 ​

js
"use strict";

var _interopRequireDefault = require("@babel/runtime-corejs2/helpers/interopRequireDefault");

var _regenerator = _interopRequireDefault(require("@babel/runtime-corejs2/regenerator"));

var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/asyncToGenerator"));

var _promise = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/promise"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/createClass"));

@babel/runtime-corejs3 ​

js
import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";

import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";

import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";

import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";

import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";

import _classCallCheck from "@babel/runtime-corejs3/helpers/esm/classCallCheck";

import _createClass from "@babel/runtime-corejs3/helpers/esm/createClass";