关于javascript：如何安装babel-polyfill库？


How do I install the babel-polyfill library?

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

没有运气，我尝试添加：

1
require("babel/polyfill");

要么

1
import * as p from"babel/polyfill";

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

Cannot find module 'babel/polyfill'

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

如何使用Babel的polyfills？

相关讨论

这在babel v6中有所改变。

从文档：

The polyfill will emulate a full ES6 environment. This polyfill is automatically loaded when using babel-node.

安装：
$ npm install babel-polyfill

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

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

注意：请勿通过browserify等对此require进行操作，请使用babel-polyfill。

相关讨论

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

Babel includes a polyfill that includes a custom regenerator runtime
and core.js.

This will emulate a full ES6 environment. This polyfill is
automatically loaded when using babel-node and babel/register.

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

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

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

1
import 'babel/polyfill';
相关讨论

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

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

要在安装后使用此标志：

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

只需添加标志：

1
useBuiltIns:"usage"

在您的babel配置文件" babel.config.js"(也是Babel @ 7的新内容)下的" @ babel / env"部分下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 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：

1
npm install --save core-js@3

新条目corejs已添加到babel.config.js中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 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如下所示：

1
2
3
4
5
6
7
8
  ...
 "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'错误消息，那么您可能只需要从以下位置更改导入语句：

1
import"babel/polyfill";

至：

1
import"babel-polyfill";

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

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

相关讨论

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

1
npm install babel --save

(如果您想require('babel-core/polyfill')，则为babel-core)。

除此之外，我还有一个艰巨的任务来将我的es6和jsx转换为构建步骤(即，我不想使用babel/register，这就是为什么我首先尝试直接使用babel/polyfill的原因)，所以我想更多地强调@ssube的答案的这一部分：

Make sure you require it at the entry-point to your application,
before anything else is called

我遇到了一个奇怪的问题，我试图从某个共享环境启动文件中要求babel/polyfill，但出现了用户引用的错误-我认为这可能与babel订单进口与需求之间的关系有关，但我现在无法复制。无论如何，将import 'babel/polyfill'作为客户端和服务器启动脚本中的第一行都可以解决此问题。

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

相关讨论

babel-polyfill allows you to use the full set of ES6 features beyond
syntax changes. This includes features such as new built-in objects
like Promises and WeakMap, as well as new static methods like
Array.from or Object.assign.

Without babel-polyfill, babel only allows you to use features like
arrow functions, destructuring, default arguments, and other
syntax-specific features introduced in 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