如何安装babel-polyfill库？

我刚刚开始使用Babel将我的ES6 javascript代码编译成ES5。当我开始使用Promises时，它似乎无法正常工作。Babel网站声明了通过polyfills支持承诺的支持。

没有运气，我尝试添加：

require("babel/polyfill");

要么

import * as p from "babel/polyfill";

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

找不到模块“ babel / polyfill”

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

如何使用Babel的polyfills？

这在babel v6中有所改变。

从文档：

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

安装：
$ npm install babel-polyfill

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

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

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

该巴贝尔文档描述了这个漂亮的简洁：

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

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

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

如果您使用gulp-babel或这类工具babel-loader，则还需要安装babel软件包本身才能使用polyfill。

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

import 'babel/polyfill';

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

参考：

• 用法#polyfill
• babel-polyfill＃在节点浏览器中使用-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和对未来的展望

如果您的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 "babel/polyfill";

至：

import "babel-polyfill";

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

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

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

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

就像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';