Question

我刚刚开始使用Babel将我的ES6 javascript代码编译成ES5。当我开始使用Promises时，看起来它不起作用。 Babel网站表示支持通过polyfill承诺。

没有运气，我试图补充：

require("babel/polyfill");

或

import * as p from "babel/polyfill";

这样我在app bootstrapping上会出现以下错误：

无法找到模块'babel / polyfill'

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

如何使用Babel的polyfill？

Answer 1

这在babel v6中有所改变。

来自文档：

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

<强>安装：
$ npm install babel-polyfill

Node / Browserify / Webpack中的用法：
要包含填充物，您需要将其放在应用程序入口点的顶部 require("babel-polyfill");

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

注意：请勿通过浏览器等require使用babel-polyfill。

Answer 2

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

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

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

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

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

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

import 'babel/polyfill';

Answer 3

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

TO：

import "babel-polyfill";

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

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

Answer 4

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

在指定此标志的情况下，babel @ 7将进行优化，仅包含您需要的polyfills。

要在安装后使用此标志：

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

只需添加标志：

useBuiltIns: "usage"

在您的babel配置文件“ babel.config.js”（也是Babel @ 7的新内容）的“ @ babel / env”部分下：

// file: babel.config.js

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

   return { presets };
};

参考：

Answer 5

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 6

就像Babel在docs中所说，对于Babel> 7.4.0，模块 @ 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';

如何安装babel-polyfill库？

6 个答案: