# @babel/polyfill

🚨 从 Babel 7.4.0 开始,这个包已被弃用,取而代之的是直接包含core-js/stable(填充 ECMAScript 特性):

import "core-js/stable";

如果您正在将生成器或异步函数编译为 ES5,并且您使用的是@babel/core@babel/plugin-transform-regenerator更早的版本7.18.0,则还必须加载regenerator runtime (opens new window) 包。@babel/preset-env使用的选项useBuiltIns: "usage"或时会自动加载@babel/plugin-transform-runtime

Babel 包含一个包含自定义再生器运行时 (opens new window)core-js 的 (opens new window) polyfill) 。

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

这意味着您可以使用新的内置函数(如Promiseor )WeakMap、静态方法(如Array.fromor Object.assign)、实例方法(如 )Array.prototype.includes和生成器函数(前提是你使用了regenerator (opens new window) 插件)。polyfill 添加到全局范围以及类似的本机原型String以执行此操作。

# 安装

  • npm
  • yarn
npm install --save @babel/polyfill
yarn add @babel/polyfill

因为这是一个 polyfill(它将在您的源代码之前运行),所以我们需要它是一个dependency,而不是一个devDependency

# 尺码

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

# TC39提案

如果您需要使用不是第 4 阶段的提案,@babel/polyfill将不会自动为您导入这些提案。您将不得不从另一个 polyfill 中core-js (opens new window) 单独导入它们。我们可能会尽快将其作为单独的文件包含在内@babel/polyfill

# 在 Node / Browserify / Webpack

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

确保它在所有其他代码/要求语句之前被调用!

require("@babel/polyfill");

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

import "@babel/polyfill";

使用 webpack,有多种方法可以包含 polyfill:

  • 一起使用时@babel/preset-env (opens new window)

  • 如果useBuiltIns: 'usage'在中指定.babelrc,则不包含@babel/polyfillwebpack.config.js条目数组或源中。注意,@babel/polyfill仍然需要安装。

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

  • 如果key 没有指定或者在你的 .babelrc 中useBuiltIns明确设置了,直接添加到你的.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(从这个包或其他地方)。

#浏览器 (opens new window)

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

注意:不要require通过 browserify 等,使用@babel/polyfill.

# 详情

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

注意:根据您实际使用的 ES2015 方法,您可能不需要使用@babel/polyfill或运行时插件。您可能只想加载您正在使用的特定 polyfill (opens new window) (如Object.assign),或者只是记录正在加载库的环境应该包含某些 polyfill。

Last Updated: 6/14/2023, 8:56:23 AM