我正在尝试在 Babel 6 上从头开始使用 async/await，但我得到regeneratorRuntime的结果没有定义。
.babelrc 文件
{
"presets": [ "es2015", "stage-0" ]
}
package.json 文件
"devDependencies": {
"babel-core": "^6.0.20",
"babel-preset-es2015": "^6.0.15",
"babel-preset-stage-0": "^6.0.15"
}
.js 文件
"use strict";
async function foo() {
await bar();
}
function bar() { }
exports.default = foo;
在没有 async/await 的情况下正常使用它可以正常工作。任何想法我做错了什么？
babel-polyfill（从 Babel 7.4 开始弃用）是必需的。您还必须安装它才能使 async/await 工作。
npm i -D babel-core babel-polyfill babel-preset-es2015 babel-preset-stage-0 babel-loader
包.json
"devDependencies": {
"babel-core": "^6.0.20",
"babel-polyfill": "^6.0.16",
"babel-preset-es2015": "^6.0.15",
"babel-preset-stage-0": "^6.0.15"
}
.babelrc
{
"presets": [ "es2015", "stage-0" ]
}
.js 与 async/await（示例代码）
"use strict";
export default async function foo() {
var s = await bar();
console.log(s);
}
function bar() {
return "bar";
}
在启动文件中
require("babel-core/register");
require("babel-polyfill");
如果你使用webpack，你需要将它作为entry你的 webpack 配置文件中数组的第一个值（通常是webpack.config.js），根据@Cemen 评论：
module.exports = {
entry: ['babel-polyfill', './test.js'],
output: {
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.jsx?$/, loader: 'babel', }
]
}
};
如果要使用 babel 运行测试，请使用：
mocha --compilers js:babel-core/register --require babel-polyfill
注意 如果您使用的是 babel 7，则该包已重命名为@babel/plugin-transform-runtime。
除了 polyfill，我还使用babel-plugin-transform-runtime。该插件描述为：
外部化对帮助程序和内置函数的引用，自动填充您的代码而不会污染全局变量。但这实际上意味着什么？基本上，你可以使用 Promise、Set、Symbol 等内置函数，也可以无缝使用所有需要 polyfill 的 Babel 特性，没有全局污染，使其非常适合库。
它还包括对 async/await 以及 ES 6 的其他内置插件的支持。
$ npm install --save-dev babel-plugin-transform-runtime
在 中.babelrc，添加运行时插件
{
"plugins": [
["transform-runtime", {
"regenerator": true
}]
]
}
Babel 7 用户
我在解决这个问题时遇到了一些麻烦，因为大多数信息都是针对以前的 babel 版本的。对于 Babel 7，安装这两个依赖项：
npm install --save @babel/runtime
npm install --save-dev @babel/plugin-transform-runtime
并且，在 .babelrc 中，添加：
{
"presets": ["@babel/preset-env"],
"plugins": [
["@babel/transform-runtime"]
]
}
如果您将目标设置为 Chrome，它会起作用。但它可能不适用于其他目标，请参考：https : //github.com/babel/babel-preset-env/issues/112
所以这个答案是不是对原来的问题很妥当。我会把它留在这里作为参考babel-preset-env。
一个简单的解决方案是import 'babel-polyfill'在代码的开头添加。
如果你使用 webpack，一个快速的解决方案是添加babel-polyfill如下所示：
entry: {
index: ['babel-polyfill', './index.js']
}
检查这个项目：https : //github.com/babel/babel-preset-env
yarn add --dev babel-preset-env
使用以下作为你的 babel 配置：
{
"presets": [
["env", {
"targets": {
"browsers": ["last 2 Chrome versions"]
}
}]
]
}
那么您的应用程序应该可以在 Chrome 浏览器的最后 2 个版本中运行。
您还可以将Node设置为目标或根据https://github.com/ai/browserslist微调浏览器列表
我真的很喜欢babel-preset-env的理念：告诉我你想支持哪个环境，不要告诉我如何支持它们。这就是声明式编程的美妙之处。
我已经测试过了async await，它们确实有效。我不知道它们是如何工作的，我真的不想知道。我想把时间花在我自己的代码和我的业务逻辑上。感谢babel-preset-env，它将我从 Babel 配置地狱中解放出来。
更新：Babel 7 帖子也有更深入的答案。
从Babel 7.4.0 开始，@babel/polyfill 已 弃用。
一般来说，有两种安装 polyfills/regenerator 的方法：通过全局命名空间（选项 1）或作为 ponyfill（选项 2，没有全局污染）。
@babel/preset-envpresets: [
["@babel/preset-env", {
"useBuiltIns": "usage",
"corejs": 3, // or 2,
"targets": {
"firefox": "64", // or whatever target to choose .
},
}]
]
将自动使用regenerator-runtime并core-js根据您的目标。无需手动导入任何内容。不要忘记安装运行时依赖项：
npm i --save regenerator-runtime core-js
或者，useBuiltIns: "entry"手动设置并导入它：
import "regenerator-runtime/runtime";
import "core-js/stable"; // if polyfills are also needed
@babel/transform-runtime与@babel/runtime这种替代方案没有全局范围污染，适用于图书馆。
{
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"regenerator": true,
"corejs": 3 // or 2; if polyfills needed
...
}
]
]
}
npm i -D @babel/plugin-transform-runtime
npm i @babel/runtime
如果使用corejspolyfill，则替换@babel/runtime为@babel/runtime-corejs2(for "corejs": 2) 或@babel/runtime-corejs3(for "corejs": 3)。