Skip to main content

@babel/plugin-transform-runtime

一个插件，可以重用 Babel 的注入帮助代码以节省代码大小。

🌐 A plugin that enables the re-use of Babel's injected helper code to save on codesize.

安装​

🌐 Installation

将其安装为开发依赖。

🌐 Install it as development dependency.

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

并且将@babel/runtime作为生产依赖（因为它是用于“运行时”的）。

🌐 and @babel/runtime as a production dependency (since it's for the "runtime").

npm install --save @babel/runtime

转换插件通常只在开发时使用，但你的部署代码会依赖于运行时本身。更多细节请看下面的示例。

🌐 The transformation plugin is typically used only in development, but the runtime itself will be depended on by your deployed code. See the examples below for more details.

danger

启用此插件时，@babel/preset-env 中的 useBuiltIns 选项不能被设置。否则，这个插件可能无法完全隔离环境。

为什么？​

🌐 Why?

Babel 对常见功能（比如 _extend）使用了很小的辅助工具。默认情况下，这会被添加到每个需要它的文件中。这种重复有时并不必要，尤其是当你的应用分布在多个文件中时。

🌐 Babel uses very small helpers for common functions such as _extend. By default this will be added to every file that requires it. This duplication is sometimes unnecessary, especially when your application is spread out over multiple files.

这就是 @babel/plugin-transform-runtime 插件的用武之地：所有的辅助工具都会引用模块 @babel/runtime，以避免你的编译输出中出现重复内容。运行时代码会被编译进你的构建中。

🌐 This is where the @babel/plugin-transform-runtime plugin comes in: all of the helpers will reference the module @babel/runtime to avoid duplication across your compiled output. The runtime will be compiled into your build.

有关这如何运作以及会发生的转换类型，请参阅技术细节部分了解更多信息。

🌐 See the technical details section for more information on how this works and the types of transformations that occur.

用法​

🌐 Usage

🌐 With a configuration file (Recommended)

没有选项：

🌐 Without options:

babel.config.json
{
  "plugins": ["@babel/plugin-transform-runtime"]
}

使用选项（及其默认值）：

🌐 With options (and their defaults):

babel.config.json
{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "absoluteRuntime": false,
        "version": "8.0.0-beta.0"
      }
    ]
  ]
}

该插件假设所有可填充的 API 都将由用户提供。更多信息请参见 babel-polyfills。

🌐 The plugin assumes that all polyfillable APIs will be provided by the user. See babel-polyfills for more information.

通过 CLI​

🌐 Via CLI

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

通过 Node API​

🌐 Via Node API

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

选项​

🌐 Options

absoluteRuntime​

boolean 或 string，默认是 false。

这允许用户在整个项目中广泛运行 transform-runtime。默认情况下，transform-runtime 会直接从 @babel/runtime/foo 导入，但这只在 @babel/runtime 位于正在编译的文件的 node_modules 中时才有效。对于嵌套的 node_modules、npm 链接的模块或者位于用户项目外的 CLI 等情况，这可能会有问题。为了避免担心运行时模块的位置是如何解析的，这允许用户提前一次性解析运行时，然后将运行时的绝对路径插入到输出代码中。

🌐 This allows users to run transform-runtime broadly across a whole project. By default, transform-runtime imports from @babel/runtime/foo directly, but that only works if @babel/runtime is in the node_modules of the file that is being compiled. This can be problematic for nested node_modules, npm-linked modules, or CLIs that reside outside the user's project, among other cases. To avoid worrying about how the runtime module's location is resolved, this allows users to resolve the runtime once up front, and then insert absolute paths to the runtime into the output code.

如果文件被编译以供以后使用，则使用绝对路径是不可取的，但在文件被编译然后立即使用的上下文中，它们可能会很有帮助。

🌐 Using absolute paths is not desirable if files are compiled for use at a later time, but in contexts where a file is compiled and then immediately consumed, they can be quite helpful.

tip

你可以在这里了解更多关于配置插件选项的内容

corejs​

danger

在 Babel 8 中，这个选项已经被移除了。要注入 polyfill，你可以直接使用 babel-plugin-polyfill-corejs3。

🌐 This option has been removed in Babel 8. To inject polyfills, you can use babel-plugin-polyfill-corejs3 directly.

helpers​

danger

helpers 选项在 Babel 8 中已被移除，因为这个插件现在只会用来注入辅助函数（包括 regeneratorRuntime，它将像其他 Babel 辅助函数一样处理）。

🌐 The helpers option has been removed in Babel 8, as this plugin will only be used to inject helpers (including regeneratorRuntime, which will be handled as any other Babel helper).

moduleName​

历史
版本变更
v7.24.0添加了 moduleName 选项

string，默认值为 @babel/runtime。

此选项控制 @babel/plugin-transform-runtime 在注入导入时使用哪一套辅助工具。它的优先顺序如下：

🌐 This option controls which package of helpers @babel/plugin-transform-runtime will use when injecting imports. It uses the following priority:

  • 如果指定了 moduleName 选项
  • 由任何 babel-plugin-polyfill-* 插件推荐的辅助模块
    • babel-plugin-polyfill-corejs3 建议 @babel/runtime-corejs3
    • babel-plugin-polyfill-corejs2 建议 @babel/runtime-corejs2
  • 回退到 @babel/runtime

version​

默认情况下，transform-runtime 假设已安装 @babel/runtime@8.0.0。如果你安装了更高版本的 @babel/runtime（或它们的 corejs 对应版本，例如 @babel/runtime-corejs3）或者将它们列为依赖，transform-runtime 可以使用更高级的功能。

🌐 By default transform-runtime assumes that @babel/runtime@8.0.0 is installed. If you have later versions of @babel/runtime (or their corejs counterparts e.g. @babel/runtime-corejs3) installed or listed as a dependency, transform-runtime can use more advanced features.

例如，如果你依赖 @babel/runtime@^8.1.0，你可以用下面的方式转译你的代码

🌐 For example if you depend on @babel/runtime@^8.1.0 you can transpile your code with

babel.config.json
{
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "version": "^8.1.0"
    }]
  ]
}

这导致更小的包大小。

🌐 which results in a smaller bundle size.

技术细节​

🌐 Technical details

助手别名​

🌐 Helper aliasing

通常 Babel 会把一些辅助函数放在文件的顶部来完成常见任务，以避免在当前文件中重复代码。有时候这些辅助函数可能会有点庞大，并在文件之间增加不必要的重复。runtime 转换器会将所有辅助函数调用替换为一个模块。

🌐 Usually Babel will place helpers at the top of your file to do common tasks to avoid duplicating the code around in the current file. Sometimes these helpers can get a little bulky and add unnecessary duplication across files. The runtime transformer replaces all the helper calls to a module.

这意味着以下代码：

🌐 That means that the following code:

JavaScript
class Person {}

通常会变成：

🌐 usually turns into:

JavaScript
"use strict";

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

var Person = function Person() {
  _classCallCheck(this, Person);
};

然而，runtime 转换器会把这个变成：

🌐 the runtime transformer however turns this into:

JavaScript
"use strict";

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

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : { default: obj };
}

var Person = function Person() {
  (0, _classCallCheck3.default)(this, Person);
};

删除的选项​

🌐 Removed options

Babel 8.0.0 中删除了以下选项：

🌐 The following options were removed in Babel 8.0.0:

  • corejs
  • helpers
  • regenerator

Babel 7.0.0 中删除了以下选项：

🌐 The following options were removed in Babel 7.0.0:

  • useBuiltIns
  • polyfill