巴贝尔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