[英]How do I install the babel-polyfill library?
I just started to use Babel to compile my ES6 javascript code into ES5.我刚开始使用 Babel 将我的 ES6 javascript 代码编译成 ES5。 When I start to use Promises it looks like it's not working.当我开始使用 Promises 时,它似乎不起作用。 The Babel website states support for promises via polyfills. Babel 网站声明通过 polyfills 支持 promise。
Without any luck, I tried to add:没有运气,我尝试添加:
require("babel/polyfill");
or或者
import * as p from "babel/polyfill";
With that I'll get the following error on my app bootstrapping:有了这个,我将在我的应用程序引导中收到以下错误:
Cannot find module 'babel/polyfill'找不到模块“babel/polyfill”
I searched for the module but it seems I'm missing some fundamental thing here.我搜索了该模块,但似乎我在这里遗漏了一些基本的东西。 I also tried to add the old and good bluebird NPM but it looks like it's not working.我还尝试添加旧的和好的 bluebird NPM,但它看起来不起作用。
How to use the polyfills from Babel?如何使用 Babel 的 polyfills?
This changed a bit in babel v6.这在 babel v6 中有所改变。
From the docs:从文档:
The polyfill will emulate a full ES6 environment. polyfill 将模拟完整的 ES6 环境。 This polyfill is automatically loaded when using babel-node.使用 babel-node 时会自动加载这个 polyfill。
Installation:安装:
$ npm install babel-polyfill
Usage in Node / Browserify / Webpack:在 Node / Browserify / Webpack 中的用法:
To include the polyfill you need to require it at the top of the entry point to your application.要包含 polyfill,您需要在应用程序入口点的顶部要求它。
require("babel-polyfill");
Usage in Browser:在浏览器中的使用:
Available from the dist/polyfill.js
file within a babel-polyfill
npm release.可从babel-polyfill
npm 版本中的dist/polyfill.js
文件中获得。 This needs to be included before all your compiled Babel code.这需要在所有编译的 Babel 代码之前包含。 You can either prepend it to your compiled code or include it in a <script>
before it.您可以将它添加到编译后的代码中,也可以将其包含在它之前的<script>
。
NOTE: Do not require
this via browserify etc, use babel-polyfill
.注意: require
通过 browserify 等,使用babel-polyfill
。
The Babel docs describe this pretty concisely: Babel 文档非常简洁地描述了这一点:
Babel includes a polyfill that includes a custom regenerator runtime and core.js. Babel 包含一个 polyfill,其中包含一个自定义的再生器运行时和 core.js。
This will emulate a full ES6 environment.这将模拟完整的 ES6 环境。 This polyfill is automatically loaded when using babel-node and babel/register.当使用 babel-node 和 babel/register 时,这个 polyfill 会自动加载。
Make sure you require it at the entry-point to your application, before anything else is called.在调用其他任何东西之前,确保在应用程序的入口点需要它。 If you're using a tool like webpack, that becomes pretty simple (you can tell webpack to include it in the bundle).如果你使用像 webpack 这样的工具,那会变得非常简单(你可以告诉 webpack 将它包含在包中)。
If you're using a tool like gulp-babel
or babel-loader
, you need to also install the babel
package itself to use the polyfill.如果您使用的是gulp-babel
或babel-loader
类的工具,则还需要安装babel
包本身以使用 polyfill。
Also note that for modules that affect the global scope (polyfills and the like), you can use a terse import to avoid having unused variables in your module:另请注意,对于影响全局范围的模块(polyfills 等),您可以使用简洁的导入来避免在您的模块中包含未使用的变量:
import 'babel/polyfill';
For Babel version 7, if your are using @babel/preset-env, to include polyfill all you have to do is add a flag 'useBuiltIns' with the value of 'usage' in your babel configuration.对于 Babel 版本 7,如果您使用 @babel/preset-env,要包含 polyfill,您所要做的就是在 babel 配置中添加一个值为 'usage' 的标志 'useBuiltIns'。 There is no need to require or import polyfill at the entry point of your App.无需在您的应用程序的入口点要求或导入 polyfill。
With this flag specified, babel@7 will optimize and only include the polyfills you needs.指定此标志后,babel@7 将进行优化并且只包含您需要的 polyfill。
To use this flag, after installation:要使用此标志,请在安装后:
npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill
Simply add the flag:只需添加标志:
useBuiltIns: "usage"
to your babel configuration file called "babel.config.js" (also new to Babel@7), under the "@babel/env" section:到名为“babel.config.js”的 babel 配置文件(也是 Babel@7 的新内容),在“@babel/env”部分下:
// file: babel.config.js
module.exports = () => {
const presets = [
[
"@babel/env",
{
targets: { /* your targeted browser */ },
useBuiltIns: "usage" // <-----------------*** add this
}
]
];
return { presets };
};
Reference:参考:
Update Aug 2019: 2019 年 8 月更新:
With the release of Babel 7.4.0 (March 19, 2019) @babel/polyfill is deprecated.随着 Babel 7.4.0(2019 年 3 月 19 日)的发布,@babel/polyfill 已被弃用。 Instead of installing @babe/polyfill, you will install core-js:您将安装 core-js,而不是安装 @babe/polyfill:
npm install --save core-js@3
A new entry corejs
is added to your babel.config.js一个新条目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 };
};
see example: https://github.com/ApolloTang/stackoverflow-eg--babel-v7.4.0-polyfill-w-core-v3参见示例: https : //github.com/ApolloTang/stackoverflow-eg--babel-v7.4.0-polyfill-w-core-v3
Reference:参考:
If your package.json looks something like the following:如果您的 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",
...
And you get the Cannot find module 'babel/polyfill'
error message, then you probably just need to change your import statement FROM:并且您收到Cannot find module 'babel/polyfill'
错误消息,那么您可能只需要更改导入语句 FROM:
import "babel/polyfill";
TO:到:
import "babel-polyfill";
And make sure it comes before any other import
statement (not necessarily at the entry point of your application).并确保它出现在任何其他import
语句之前(不一定在应用程序的入口点)。
Reference: https://babeljs.io/docs/usage/polyfill/参考: https : //babeljs.io/docs/usage/polyfill/
First off, the obvious answer that no one has provided, you need to install Babel into your application:首先,没有人提供明显的答案,您需要将 Babel 安装到您的应用程序中:
npm install babel --save
(or babel-core
if you instead want to require('babel-core/polyfill')
). (或者babel-core
如果你想要require('babel-core/polyfill')
)。
Aside from that, I have a grunt task to transpile my es6 and jsx as a build step (ie I don't want to use babel/register
, which is why I am trying to use babel/polyfill
directly in the first place), so I'd like to put more emphasis on this part of @ssube's answer:除此之外,我有一个繁重的任务来将我的 es6 和 jsx 编译为构建步骤(即我不想使用babel/register
,这就是为什么我首先尝试直接使用babel/polyfill
),所以我想更加强调@ssube 回答的这一部分:
Make sure you require it at the entry-point to your application, before anything else is called在调用其他任何东西之前,确保在应用程序的入口点需要它
I ran into some weird issue where I was trying to require babel/polyfill
from some shared environment startup file and I got the error the user referenced - I think it might have had something to do with how babel orders imports versus requires but I'm unable to reproduce now.我遇到了一些奇怪的问题,我试图从一些共享环境启动文件中要求babel/polyfill
,但我收到了用户引用的错误 - 我认为这可能与 babel 订单导入与需要的方式有关,但我是现在无法重现。 Anyway, moving import 'babel/polyfill'
as the first line in both my client and server startup scripts fixed the problem.无论如何,将import 'babel/polyfill'
作为我的客户端和服务器启动脚本中的第一行解决了这个问题。
Note that if you instead want to use require('babel/polyfill')
I would make sure all your other module loader statements are also requires and not use imports - avoid mixing the two.请注意,如果您想使用require('babel/polyfill')
我会确保您所有其他模块加载器语句也是需要的,而不是使用导入 - 避免将两者混合。 In other words, if you have any import statements in your startup script, make import babel/polyfill
the first line in your script rather than 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. babel-polyfill 允许您使用除语法更改之外的全套 ES6 功能。 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.这包括新的内置对象(如 Promises 和 WeakMap)以及新的静态方法(如 Array.from 或 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.如果没有 babel-polyfill,babel 只允许你使用箭头函数、解构、默认参数和 ES6 中引入的其他特定于语法的特性。
https://www.quora.com/What-does-babel-polyfill-do 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 https://hackernoon.com/polyfills-everything-you-ever-wanted-to-know-or-maybe-a-bit-less-7c8de164e423
Like Babel says in the docs , for Babel > 7.4.0 the module @babel/polyfill is deprecated , so it's recommended to use directly core-js and regenerator-runtime libraries that before were included in @babel/polyfill.就像 Babel 在文档中所说的那样,对于 Babel > 7.4.0 模块@babel/polyfill 已弃用,因此建议直接使用之前包含在 @babel/polyfill 中的core-js和regenerator-runtime库。
So this worked for me:所以这对我有用:
npm install --save core-js@3.6.5
npm install regenerator-runtime
then add to the very top of your initial js file:然后添加到初始 js 文件的最顶部:
import 'core-js/stable';
import 'regenerator-runtime/runtime';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.