Shl*_*son 134 javascript node.js polyfills babeljs babel-polyfill
我刚刚开始使用Babel将我的ES6 javascript代码编译成ES5.当我开始使用Promises时,看起来它不起作用.Babel网站表示支持通过polyfill承诺.
没有运气,我试图添加:
require("babel/polyfill");
要么
import * as p from "babel/polyfill";
有了这个我将在我的应用程序引导上得到以下错误:
找不到模块'babel/polyfill'
我搜索了模块,但似乎我在这里缺少一些基本的东西.我也尝试添加旧的和好的蓝鸟NPM,但看起来它不起作用.
如何使用Babel的polyfills？
vdc*_*uis 65
这在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这不是通过浏览器等,使用babel-polyfill.
ssu*_*ube 48
该巴贝尔文档描述了这个漂亮的简洁:
Babel包含一个polyfill,它包含一个自定义再生器运行时和core.js.
这将模拟完整的ES6环境.使用babel-node和babel/register时会自动加载此polyfill.
在调用其他任何内容之前,请确保在应用程序的入口点需要它.如果您正在使用像webpack这样的工具,那就变得非常简单了(您可以告诉webpack将其包含在捆绑包中).
如果你使用像一个工具gulp-babel或者babel-loader,你还需要安装babel包本身使用填充工具.
另请注意,对于影响全局范围的模块(polyfills等),您可以使用简洁导入来避免模块中包含未使用的变量:
import 'babel/polyfill';
l3x*_*l3x 19
如果你的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语句FROM:
import "babel/polyfill";
至:
import "babel-polyfill";
并确保它出现在任何其他import声明之前(不一定在您的应用程序的入口点).
参考:https: //babeljs.io/docs/usage/polyfill/
apo*_*llo 16
对于Babel版本7,如果你正在使用@ babel/preset-env,要包含polyfill所有你需要做的就是在你的babel配置中添加一个标记'useBuiltIns',其值为'usage'.无需在应用程序的入口点处要求或导入polyfill.
指定此标志后,babel @ 7将优化并仅包含您需要的polyfill.
要在安装后使用此标志:
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 };
};
参考:
首先,没有人提供的明显答案,您需要在您的应用程序中安装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