如何安装 babel-polyfill 库？

Question

我刚开始使用 Babel 将我的 ES6 javascript 代码编译成 ES5。 当我开始使用 Promises 时，它似乎不起作用。 Babel 网站声明通过 polyfills 支持 promise。

没有运气，我尝试添加：

require("babel/polyfill");

或者

import * as p from "babel/polyfill";

有了这个，我将在我的应用程序引导中收到以下错误：

找不到模块“babel/polyfill”

我搜索了该模块，但似乎我在这里遗漏了一些基本的东西。 我还尝试添加旧的和好的 bluebird NPM，但它看起来不起作用。

如何使用 Babel 的 polyfills？

Answer 1

这在 babel v6 中有所改变。

从文档：

polyfill 将模拟完整的 ES6 环境。 使用 babel-node 时会自动加载这个 polyfill。

安装：
$ npm install babel-polyfill

在 Node / Browserify / Webpack 中的用法：
要包含 polyfill，您需要在应用程序入口点的顶部要求它。
require("babel-polyfill");

在浏览器中的使用：
可从babel-polyfill npm 版本中的dist/polyfill.js文件中获得。 这需要在所有编译的 Babel 代码之前包含。 您可以将它添加到编译后的代码中，也可以将其包含在它之前的<script> 。

注意： require通过 browserify 等，使用babel-polyfill 。

Answer 2

Babel 文档非常简洁地描述了这一点：

Babel 包含一个 polyfill，其中包含一个自定义的再生器运行时和 core.js。

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

在调用其他任何东西之前，确保在应用程序的入口点需要它。 如果你使用像 webpack 这样的工具，那会变得非常简单（你可以告诉 webpack 将它包含在包中）。

如果您使用的是gulp-babel或babel-loader类的工具，则还需要安装babel包本身以使用 polyfill。

另请注意，对于影响全局范围的模块（polyfills 等），您可以使用简洁的导入来避免在您的模块中包含未使用的变量：

import 'babel/polyfill';

Answer 3

对于 Babel 版本 7，如果您使用 @babel/preset-env，要包含 polyfill，您所要做的就是在 babel 配置中添加一个值为 'usage' 的标志 'useBuiltIns'。 无需在您的应用程序的入口点要求或导入 polyfill。

指定此标志后，babel@7 将进行优化并且只包含您需要的 polyfill。

要使用此标志，请在安装后：

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 };
};

参考：

• 用法#polyfill
• babel-polyfill#usage-in-node-browserify-webpack
• babel-preset-env#usebuiltins

---

2019 年 8 月更新：

随着 Babel 7.4.0（2019 年 3 月 19 日）的发布，@babel/polyfill 已被弃用。 您将安装 core-js，而不是安装 @babe/polyfill：

npm install --save core-js@3

一个新条目corejs被添加到你的 babel.config.js

// 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

参考：

• 7.4.0 发布：core-js 3、静态私有方法和部分应用
• core-js@3、babel 和展望未来

Answer 4

如果您的 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'错误消息，那么您可能只需要更改导入语句 FROM：

import "babel/polyfill";

到：

import "babel-polyfill";

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

参考： https : //babeljs.io/docs/usage/polyfill/

Answer 5

首先，没有人提供明显的答案，您需要将 Babel 安装到您的应用程序中：

npm install babel --save

（或者babel-core如果你想要require('babel-core/polyfill') ）。

除此之外，我有一个繁重的任务来将我的 es6 和 jsx 编译为构建步骤（即我不想使用babel/register ，这就是为什么我首先尝试直接使用babel/polyfill ），所以我想更加强调@ssube 回答的这一部分：

在调用其他任何东西之前，确保在应用程序的入口点需要它

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

请注意，如果您想使用require('babel/polyfill')我会确保您所有其他模块加载器语句也是需要的，而不是使用导入 - 避免将两者混合。 换句话说，如果您的启动脚本中有任何 import 语句，请将import babel/polyfill放在脚本的第一行而不是require('babel/polyfill') 。

Answer 6

babel-polyfill 允许您使用除语法更改之外的全套 ES6 功能。 这包括新的内置对象（如 Promises 和 WeakMap）以及新的静态方法（如 Array.from 或 Object.assign）等功能。

如果没有 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

Answer 7

就像 Babel 在文档中所说的那样，对于 Babel > 7.4.0 模块@babel/polyfill 已弃用，因此建议直接使用之前包含在 @babel/polyfill 中的core-js和regenerator-runtime库。

所以这对我有用：

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

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

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