Javascript 如何安装 babel-polyfill 库？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31122193/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I install the babel-polyfill library?
提问by Shlomi Sasson
I just started to use Babel to compile my ES6 javascript code into ES5. When I start to use Promises it looks like it's not working. The Babel website states support for promises via polyfills.
我刚开始使用 Babel 将我的 ES6 javascript 代码编译成 ES5。当我开始使用 Promises 时，它似乎不起作用。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？
回答by vdclouis
This changed a bit in babel v6.
这在 babel v6 中有所改变。
From the docs:
从文档：
The polyfill will emulate a full ES6 environment. This polyfill is automatically loaded when using babel-node.
polyfill 将模拟完整的 ES6 环境。使用 babel-node 时会自动加载这个 polyfill。
Installation:$ npm install babel-polyfill
安装：$ npm install babel-polyfill
Usage in Node / Browserify / Webpack:
To include the polyfill you need to require it at the top of the entry point to your application.require("babel-polyfill");
在 Node / Browserify / Webpack 中的用法：
要包含polyfill，您需要在应用程序入口点的顶部 require 它。require("babel-polyfill");
Usage in Browser:
Available from the dist/polyfill.jsfile within a babel-polyfillnpm release. This needs to be included before all your compiled Babel code. You can either prepend it to your compiled code or include it in a <script>before it.
在浏览器中的使用：
可从npm 版本中的dist/polyfill.js文件中获得babel-polyfill。这需要在所有编译的 Babel 代码之前包含。您可以将其添加到已编译的代码中，也可以将其包含在 a<script>之前。
NOTE: Do not requirethis via browserify etc, use babel-polyfill.
注意：不要require通过 browserify 等，使用babel-polyfill.
回答by ssube
The Babel docsdescribe this pretty concisely:
该巴贝尔文档描述了这个漂亮的简洁：
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.
Babel 包含一个 polyfill，其中包含一个自定义的再生器运行时和 core.js。
这将模拟完整的 ES6 环境。当使用 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-babelor babel-loader, you need to also install the babelpackage 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';
回答by apollo
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. There is no need to require or import polyfill at the entry point of your App.
对于 Babel 版本 7，如果您使用 @babel/preset-env，要包含 polyfill，您所要做的就是在 babel 配置中添加一个值为 'usage' 的标志 'useBuiltIns'。无需在您的应用程序的入口点要求或导入 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. Instead of installing @babe/polyfill, you will install core-js:
随着 Babel 7.4.0（2019 年 3 月 19 日）的发布，@babel/polyfill 已被弃用。您将安装 core-js，而不是安装 @babe/polyfill：
npm install --save core-js@3
A new entry corejsis 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:
参考：
回答by l3x
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 importstatement (not necessarily at the entry point of your application).
并确保它出现在任何其他import语句之前（不一定在应用程序的入口点）。
Reference: https://babeljs.io/docs/usage/polyfill/
回答by ChetPrickles
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-coreif 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 (i.e. I don't want to use babel/register, which is why I am trying to use babel/polyfilldirectly 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/polyfillfrom 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. Anyway, moving import 'babel/polyfill'as the first line in both my client and server startup scripts fixed the problem.
我遇到了一些奇怪的问题，我试图babel/polyfill从一些共享环境启动文件中要求，但我得到了用户引用的错误 - 我认为这可能与 babel 订单导入与需要的方式有关，但我无法重现现在。无论如何，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. In other words, if you have any import statements in your startup script, make import babel/polyfillthe first line in your script rather than require('babel/polyfill').
请注意，如果您想使用require('babel/polyfill')I 将确保您的所有其他模块加载器语句也需要并且不使用导入 - 避免将两者混合。换句话说，如果您的启动脚本中有任何 import 语句，请在脚本中创建import babel/polyfill第一行而不是require('babel/polyfill').
回答by zloctb
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.
babel-polyfill 允许您使用除语法更改之外的全套 ES6 功能。这包括新的内置对象（如 Promises 和 WeakMap）以及新的静态方法（如 Array.from 或 Object.assign）等功能。
如果没有 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
