143

我刚开始使用 Babel 将我的 ES6 javascript 代码编译成 ES5。当我开始使用 Promises 时，它看起来好像不起作用。Babel 网站声明通过 polyfill 支持 Promise。

没有任何运气，我尝试添加：

require("babel/polyfill");

或者

import * as p from "babel/polyfill";

这样我会在我的应用程序引导时收到以下错误：

找不到模块'babel/polyfill'

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

如何使用 Babel 的 polyfill？

4

7 回答 7

69

这在 babel v6 中有所改变。

从文档：

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

安装：
$ npm install babel-polyfill

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

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

注意：不要require通过 browserify 等，使用babel-polyfill.

于 2015-11-06T13:47:01.823 回答
49

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

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

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

在调用其他任何内容之前，请确保在应用程序的入口点需要它。如果您使用的是 webpack 之类的工具，那将变得非常简单（您可以告诉 webpack 将其包含在包中）。

如果您使用类似gulp-babelor的工具babel-loader，您还需要安装babel包本身才能使用 polyfill。

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

import 'babel/polyfill';
于 2015-06-29T17:50:53.283 回答
27

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

参考：

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

参考：

于 2018-11-04T15:32:34.587 回答
19

如果你的 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/

于 2016-05-11T03:22:31.177 回答
9

首先，没有人提供的明显答案，您需要将 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').

于 2015-09-11T03:55:41.787 回答
8

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

于 2017-09-12T11:50:41.787 回答
2

就像 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';
于 2020-07-08T13:21:32.077 回答