如何安装 babel-polyfill 库？

小开

Babel 医生对此的描述相当简洁:

Babel 包括一个包含自定义再生器运行时的 polyfill 还有 CoreJs。

这将模拟一个完整的 ES6环境使用 babel-node 和 babel/register 时自动加载。

在调用其他任何东西之前，确保在应用程序的入口点需要它。如果您正在使用像 webpack 这样的工具，那就非常简单了(您可以告诉 webpack 将它包含在捆绑包中)。

如果您正在使用像 gulp-babel或 babel-loader这样的工具，您还需要安装 babel包本身来使用 polyfill。

还要注意，对于影响全局范围的模块(填充等) ，可以使用简洁的导入来避免在模块中包含未使用的变量:

import 'babel/polyfill';

小开

首先，没有人给出明显的答案，你需要在你的应用程序中安装 Babel:

npm install babel --save

(或 babel-core，如果你想取代 require('babel-core/polyfill'))。

除此之外，作为构建步骤，我还有一个繁琐的任务来传输我的 es6和 jsx (也就是说，我不想使用 babel/register，这就是为什么我一开始试图直接使用 babel/polyfill) ，所以我想更加强调@ssube 回答的这一部分:

确保您在应用程序的入口点需要它, 在其他名字出现之前

我遇到了一些奇怪的问题，我试图要求 babel/polyfill从一些共享的环境启动文件，我得到了错误的用户参考-我认为这可能与如何巴贝尔订单导入与需求，但我现在无法重现。无论如何，在我的客户端和服务器启动脚本中将 import 'babel/polyfill'作为第一行修复了这个问题。

请注意，如果您想要使用 require('babel/polyfill')，我将确保所有其他模块加载程序语句也是必需的，并且不使用导入-避免混合使用这两种语句。换句话说，如果在启动脚本中有任何 import 语句，那么将 import babel/polyfill设置为脚本中的第一行，而不是 require('babel/polyfill')。

小开

这在 Babel V6中有所改变。

来自文件:

填充器将模拟一个完整的 ES6环境。当使用 babel-node 时，填充器将自动加载。

安装:
$ npm install babel-polyfill

在 Node/Browserify/Webpack 中的使用:
要包含填充材料，您需要在应用程序的入口点的顶部使用它。
require("babel-polyfill");

浏览器用法:
可从 babel-polyfill npm 发行版中的 dist/polyfill.js文件获得。这需要包括在所有编译的 Babel 代码之前。您可以将其预先放在编译后的代码中，也可以将其包含在编译后的代码之前的 <script>中。

注意: 不要 require这通过浏览等，使用 babel-polyfill。

小开

如果 package.json 看起来像下面这样:

  ...
"devDependencies": {
"babel": "^6.5.2",
"babel-eslint": "^6.0.4",
"babel-polyfill": "^6.8.0",
"babel-preset-es2015": "^6.6.0",
"babelify": "^7.3.0",
...

如果你得到了 Cannot find module 'babel/polyfill'错误消息，那么你可能只需要改变你的 import 语句 FROM:

import "babel/polyfill";

致:

import "babel-polyfill";

并确保它出现在任何其他 import语句之前(不一定出现在应用程序的入口点)。

参考资料: https://babeljs.io/docs/usage/polyfill/

小开

Babel-polyfill 允许您使用 ES6的全部特性语法更改。这包括新的内置对象等特性类似于“承诺”和“弱地图”，以及新的静态方法，如从或对象。赋值。

如果没有 babel-polyfill，babel 只允许您使用以下特性箭头函数、解构、默认参数和其他 ES6中引入的特定于语法的特性。

Https://www.quora.com/what-does-babel-polyfill-do

Https://hackernoon.com/polyfills-everything-you-ever-wanted-to-know-or-maybe-a-bit-less-7c8de164e423

小开

对于 Babel 版本7，如果您正在使用@Babel/preset-env，那么要包含 polyfill，您只需在 Babel 配置中添加一个标志“ useBuiltIns”，其值为“ use”。没有必要要求或导入填充在您的应用程序的入口点。

如果指定了这个标志，babel@7将进行优化，并且只包含您需要的填充物。

安装后使用此标志:

npm install --save-dev  @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill

简单地添加旗帜:

useBuiltIns: "usage"

到名为“ Babel.config.js”的 Babel 配置文件(对于 Babel@7也是全新的)的“@Babel/env”部分:

// file: babel.config.js


module.exports = () => {
const presets = [
[
"@babel/env",
{
targets: { /* your targeted browser */ },
useBuiltIns: "usage"  // <-----------------*** add this
}
]
];


return { presets };
};

参考文献:

2019年8月更新:

随着 Babel 7.4.0(2019年3月19日)@Babel/polyfill 的发布，我们不再推荐使用这个软件，而是安装 core-js:

npm install --save core-js@3

向 babel.config.js 添加一个新条目 corejs

// file: babel.config.js


module.exports = () => {
const presets = [
[
"@babel/env",
{
targets: { /* your targeted browser */ },
useBuiltIns: "usage",
corejs: 3  // <----- specify version of corejs used
}
]
];


return { presets };
};

参见例子: https://github.com/ApolloTang/stackoverflow-eg--babel-v7.4.0-polyfill-w-core-v3

参考文献:

小开

就像 Babel 在医生中说的，对于 Babel > 7.4.0的模块 @ babel/polyfill 不建议使用，所以建议直接使用之前包含在@Babel/polyfill 中的 Core-Js和 再生器-运行时库。

所以这对我很有用:

npm install --save core-js@3.6.5
npm install regenerator-runtime

然后添加到初始 js 文件的最顶部:

import 'core-js/stable';
import 'regenerator-runtime/runtime';