# @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
)。
这意味着您可以使用新的内置函数(如Promise
or )WeakMap
、静态方法(如Array.from
or 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:
如果
useBuiltIns: 'usage'
在中指定.babelrc
,则不包含@babel/polyfill
在webpack.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。