Skip to main content

@babel/polyfill

danger

🚨 从 Babel 7.4.0 起，这个包已被弃用，建议直接包含 core-js/stable（用于填充 ECMAScript 功能）:

JavaScript
import "core-js/stable";

如果你正在将生成器或异步函数编译为 ES5，并且你使用的 @babel/core 或 @babel/plugin-transform-regenerator 版本早于 7.18.0，你还必须加载 regenerator runtime 包。当使用 @babel/preset-env 的 useBuiltIns: "usage" 选项或 @babel/plugin-transform-runtime 时，它会自动加载。

🌐 If you are compiling generators or async function to ES5, and you are using a version of @babel/core or @babel/plugin-transform-regenerator older than 7.18.0, you must also load the regenerator runtime package. It is automatically loaded when using @babel/preset-env's useBuiltIns: "usage" option or @babel/plugin-transform-runtime.

Babel 包含一个 polyfill，它包括一个自定义的 regenerator runtime 和 core-js。

这将模拟一个完整的 ES2015+ 环境（不包括 < Stage 4 提案），并且旨在在应用中使用，而不是库/工具中使用。（当使用 babel-node 时，这个 polyfill 会自动加载。）

🌐 This will emulate a full ES2015+ environment (no < Stage 4 proposals) and is intended to be used in an application rather than a library/tool. (this polyfill is automatically loaded when using babel-node).

这意味着你可以使用新的内置功能，比如 Promise 或 WeakMap，静态方法比如 Array.from 或 Object.assign，实例方法比如 Array.prototype.includes，以及生成器函数（前提是你使用了 regenerator 插件）。这个 polyfill 会添加到全局作用域以及像 String 这样的原生原型上来实现这些功能。

🌐 This means you can use new built-ins like Promise or WeakMap, static methods like Array.from or Object.assign, instance methods like Array.prototype.includes, and generator functions (provided you use the regenerator plugin). The polyfill adds to the global scope as well as native prototypes like String in order to do this.

安装​

🌐 Installation

npm install --save @babel/polyfill
info

因为这是一个 polyfill（会在你的源代码之前运行），所以我们需要它是一个 dependency，而不是 devDependency

尺寸​

🌐 Size

这个 polyfill 是为了方便提供的，但你应该和 @babel/preset-env 以及 useBuiltIns 选项 一起使用，这样它就不会包含整个 polyfill，因为有时并不需要。否则，我们建议你手动导入各个 polyfill。

🌐 The polyfill is provided as a convenience but you should use it with @babel/preset-env and the useBuiltIns option so that it doesn't include the whole polyfill which isn't always needed. Otherwise, we would recommend you import the individual polyfills manually.

TC39 提案​

🌐 TC39 Proposals

如果你需要使用不是 Stage 4 的提案，@babel/polyfill 不会自动为你导入这些内容。你需要像 core-js 这样的其他 polyfill 来单独导入它们。我们可能会很快考虑把它们作为单独的文件包含在 @babel/polyfill 中。

🌐 If you need to use a proposal that is not Stage 4, @babel/polyfill will not automatically import those for you. You will have to import those from another polyfill like core-js individually. We may work towards including this as separate files in @babel/polyfill soon.

在 Node / Browserify / Webpack 中的使用​

🌐 Usage in Node / Browserify / Webpack

要包含这个 polyfill，你需要在应用的入口文件顶部引入它。

🌐 To include the polyfill you need to require it at the top of the entry point to your application.

确保在所有其他代码/引入语句之前调用它！

🌐 Make sure it is called before all other code/require statements!

JavaScript
require("@babel/polyfill");

如果你在应用的入口点使用 ES6 的 import 语法，你应该在入口点的顶部引入 polyfill，以确保 polyfill 优先加载：

🌐 If you are using ES6's import syntax in your application's entry point, you should instead import the polyfill at the top of the entry point to ensure the polyfills are loaded first:

JavaScript
import "@babel/polyfill";

使用 webpack，有多种方法可以包含 polyfill：

🌐 With webpack, there are multiple ways to include the polyfills:

  • 当与@babel/preset-env一起使用时，
    • 如果在 .babelrc 中指定了 useBuiltIns: 'usage'，那么不要在 webpack.config.js 条目数组或源中包含 @babel/polyfill。注意，@babel/polyfill 仍然需要安装。
    • 如果在 .babelrc 中指定了 useBuiltIns: 'entry'，那么就像上面讨论的那样，通过 require 或 import 在应用的入口点顶部包含 @babel/polyfill。
    • 如果在你的 .babelrc 中没有指定 useBuiltIns 键，或者它被明确设置为 useBuiltIns: false，就在你的 webpack.config.js 的入口数组中直接添加 @babel/polyfill。
webpack.config.js
module.exports = {
  entry: ["@babel/polyfill", "./app/js"],
};
  • 如果没有使用@babel/preset-env，那么就像上面讨论的那样，将@babel/polyfill添加到 webpack 的入口数组中。它仍然可以通过import或require添加到应用入口的顶部，但不推荐这样做。
caution

我们不建议你直接导入整个 polyfill：你可以尝试 useBuiltIns 选项，或者只手动导入你需要的 polyfill（无论是从这个包里还是其他地方）。

在浏览器中的使用​

🌐 Usage in Browser

可从 @babel/polyfill npm 发布中的 dist/polyfill.js 文件获得。
这需要在你所有编译后的 Babel 代码之前包含。你可以将它添加到编译后的代码前面，或者在它之前包含到一个 <script> 中。

🌐 Available from the dist/polyfill.js file within a @babel/polyfill npm release. This needs to be included before all your compiled Babel code. You can either prepend it to your compiled code or include it in a <script> before it.

注意: 不要通过 browserify 等工具 require，使用 @babel/polyfill。

详情​

🌐 Details

tip

如果你正在寻找不会修改全局变量、可用于工具/库的东西，可以看看 transform-runtime 插件。这意味着你将无法使用上面提到的实例方法，比如 Array.prototype.includes。

注意：根据你实际使用的 ES2015 方法，你可能不需要使用 @babel/polyfill 或运行时插件。你可能只想加载你使用的特定 polyfill（比如 Object.assign），或者只是说明库所在的环境应该包含某些 polyfill。

🌐 Note: Depending on what ES2015 methods you actually use, you may not need to use @babel/polyfill or the runtime plugin. You may want to only load the specific polyfills you are using (like Object.assign) or just document that the environment the library is being loaded in should include certain polyfills.