跳至主要内容

@babel/polyfill

危险

🚨 从 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 时，它会自动加载。

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

这将模拟完整的 ES2015+ 环境（没有 < Stage 4 提案），并且旨在用于应用程序而不是库/工具。（使用 babel-node 时会自动加载此 polyfill）。

这意味着您可以使用新的内置函数，如 Promise 或 WeakMap，静态方法，如 Array.from 或 Object.assign，实例方法，如 Array.prototype.includes，以及生成器函数（前提是您使用了 regenerator 插件）。polyfill 会添加到全局作用域以及原生原型（如 String）中，以便实现这一点。

安装​

npm install --save @babel/polyfill
信息

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

大小​

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

TC39 提案​

如果您需要使用非 Stage 4 的提案，@babel/polyfill 将不会自动为您导入它们。您必须单独从其他 polyfill（如 core-js）导入它们。我们可能会努力在不久的将来将此作为单独的文件包含在 @babel/polyfill 中。

在 Node / Browserify / Webpack 中使用​

要包含 polyfill，您需要在应用程序的入口点顶部 require 它。

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

JavaScript
require("@babel/polyfill");

如果您在应用程序的入口点中使用 ES6 的 import 语法，则应改为在入口点顶部导入 polyfill，以确保先加载 polyfill

JavaScript
import "@babel/polyfill";

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

  • 与 @babel/preset-env 一起使用时，

    • 如果在 .babelrc 中指定了 useBuiltIns: 'usage'，则不要在 webpack.config.js 入口数组或源代码中包含 @babel/polyfill。注意，仍然需要安装 @babel/polyfill。

    • 如果在 .babelrc 中指定了 useBuiltIns: 'entry'，则如上所述，通过 require 或 import 在应用程序入口点的顶部包含 @babel/polyfill。

    • 如果未指定 useBuiltIns 键，或者在 .babelrc 中使用 useBuiltIns: false 显式设置，则将 @babel/polyfill 直接添加到 webpack.config.js 中的入口数组。

webpack.config.js
module.exports = {
  entry: ["@babel/polyfill", "./app/js"],
};
  • 如果未使用 @babel/preset-env，则如上所述，将 @babel/polyfill 添加到 webpack 入口数组中。它仍然可以通过 import 或 require 添加到应用程序入口点的顶部，但不建议这样做。
注意

我们不建议您直接导入整个 polyfill：请尝试 useBuiltIns 选项或仅手动导入您需要的 polyfill（从此包或其他地方导入）。

在浏览器中使用​

可从 @babel/polyfill npm 版本中的 dist/polyfill.js 文件获取。这需要在所有已编译的 Babel 代码之前包含。您可以将其预置到已编译的代码中，也可以将其包含在之前的 <script> 中。

注意：不要通过 browserify 等 require 此文件，请使用 @babel/polyfill。

详情​

提示

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

注意：根据您实际使用的 ES2015 方法，您可能不需要使用 @babel/polyfill 或运行时插件。您可能只想 加载您正在使用的特定 polyfill（如 Object.assign）或仅记录加载库的环境应包含某些 polyfill。