巴贝尔polyfill? 那是什么?

我刚开始使用Babel将我的ES6 JavaScript代码编译成ES5。 当我开始使用Promise时,它看起来不起作用。 Babel网站通过polyfills声明支持承诺。

没有任何运气,我试图添加:

require("babel/polyfill"); 

要么

 import * as p from "babel/polyfill"; 

与此同时,我会在我的应用程序bootstrapping上得到以下错误:

找不到模块'babel / polyfill'

我search了模块,但似乎我在这里错过了一些基本的东西。 我也尝试添加旧的和良好的蓝鸟NPM,但它看起来不工作。

如何使用Babel的polyfills?

这在babel v6中有所改变。

从文档:

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

安装:
$ npm install babel-polyfill

Node / Browserify / Webpack中的用法:
要包含polyfill,你需要在你的应用程序的入口点的顶部。
require("babel-polyfill");

浏览器中的使用:
可从babel-polyfill npm版本的dist/polyfill.js文件中获得。 这需要包括在所有编译的Babel代码之前。 你可以把它加到你编译的代码中,或者把它包含在一个<script>之前。

注意:不require这通过browserify等,使用babel-polyfill

巴贝尔文件描述这非常简洁:

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

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

在调用其他任何东西之前,确保您在应用程序的入口点需要它。 如果您使用的是像webpack这样的工具,那就变得非常简单了(您可以告诉webpack将其包含在软件包中)。

如果你使用的是像gulp-babel或者babel-loader这样的工具,你还需要安装babel包来使用polyfill。

另请注意,对于影响全局范围的模块(polyfill等),您可以使用简化导入来避免模块中有未使用的variables:

 import 'babel/polyfill'; 

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

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

 npm install babel --save 

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

除此之外,我有一个咕噜的任务,以esp和jsx作为构build步骤(即我不想使用babel/register ,这就是为什么我试图直接使用babel/polyfill )所以我想把更多的重点放在@ssube的答案的这一部分:

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

我遇到了一个奇怪的问题,我试图从一些共享的环境启动文件需要babel/polyfill ,我得到了错误的用户引用 – 我想这可能是有关如何巴贝尔订单import与要求,但我是现在无法复制。 无论如何,移动import 'babel/polyfill'作为我的客户端和服务器启动脚本的第一行解决了这个问题。

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

babel-polyfill允许您在语法更改之外使用整套ES6function。 这包括像Promises和WeakMap这样的新内build对象,以及像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