跳至主内容

@babel/polyfill

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

危险

🚨 自 Babel 7.4.0 起，此包已被弃用，推荐直接引入 core-js/stable（用于实现 ECMAScript 特性的 polyfill）：

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。

该 polyfill 可模拟完整的 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 不会自动导入相关实现。您需从 core-js 等其他 polyfill 单独导入。我们正考虑在 @babel/polyfill 中将其作为独立文件提供。

在 Node/Browserify/Webpack 中的用法​

需在应用程序入口点顶部引入 polyfill：

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

JavaScript
require("@babel/polyfill");

若在应用程序入口点使用 ES6 的 import 语法，则应在入口点顶部导入 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 或显式设置为 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 在应用入口顶部引入，但此方式不被推荐。

注意

我们不建议直接导入整个垫片：请尝试使用 useBuiltIns 选项，或手动导入所需的具体垫片（可从本包或其他来源获取）。

在浏览器中使用​

通过 @babel/polyfill npm 包中的 dist/polyfill.js 文件引入。该文件必须在所有编译后的 Babel 代码之前加载。您可将其置于编译代码前端，或在代码前通过 <script> 标签引入。

注意： 请勿通过 browserify 等方式 require 此文件，应直接使用 @babel/polyfill。

详细说明​

提示

若您需要在工具/库中使用不污染全局变量的方案，请查看 transform-runtime 插件。但需注意，此方式将无法使用前文提及的实例方法（如 Array.prototype.includes）。

注意：根据实际使用的 ES2015 方法，您可能无需 @babel/polyfill 或运行时插件。建议仅加载您使用的特定垫片（如 Object.assign），或在文档中声明运行环境需预置特定垫片。