我正在尝试在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
package.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" ]
}
.使用async/await的.js示例代码
"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.config.js）的entry数组中将其作为第一个值，如@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
require("babel-polyfill")，而是将"babel-polyfill"添加到配置文件的entry中，像这样：entry: ["babel-polyfill", "src/main.js"]。 这对我很有效，包括在带有HMR的webpack-dev-server中使用。 - CemendevDependency作为依赖项，因为webpack会在运行前“编译”文件。如果你不使用webpack，并且需要使用babel，则需要将其作为dependency。 - BrunoLM注意 如果您使用的是babel 7，则该软件包已更名为@babel/plugin-transform-runtime。
除了polyfill外，我还使用babel-plugin-transform-runtime。这个插件被描述为：
将helpers和builtins引用external化，自动填充代码而不污染全局变量。但这实际上意味着什么呢？基本上，您可以无缝地使用内置函数（如Promise，Set，Symbol等）以及使用所有需要polyfill的Babel功能，而不会污染全局变量，使其非常适合库。
它还包括对ES 6的async/await以及其他内置的支持。
$ npm install --save-dev babel-plugin-transform-runtime
.babelrc文件中，添加运行时插件。{
"plugins": [
["transform-runtime", {
"regenerator": true
}]
]
}
babel-runtime 就能让 async await 正常工作。这句话正确吗？编辑：我在服务器端运行代码。 :) - GijsjanBbabel-plugin-transform-runtime 就可以了，非常好用。 - saiketransform-runtime 插件添加的 require 调用。 - Finessenpm install --save-dev @babel/plugin-transform-runtime。 - Andrey SemakinBabel 7用户
我在使用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"]
]
}
"plugins": ["@babel/plugin-transform-runtime"]，而不是这里的"plugins": [["@babel/transform-runtime"]]。插件名称不同，两者都能正常工作。但哪个是正确的？ - kyw@babel/transform-runtime添加到插件中会导致“exports未定义”的错误。我将其更改为以下内容，以使Babel7中的async函数正常工作：["@babel/plugin-transform-runtime",
{
"regenerator": true
}
] - Hari如果您将目标设置为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 浏览器的最后两个版本中使用。
您还可以将Node设置为目标或根据https://github.com/ai/browserslist调整浏览器列表
我真的很喜欢babel-preset-env的理念：告诉我您想要支持哪个环境，不要告诉我如何支持它们。这就是声明式编程的美妙之处。
我已经测试过asyncawait，并且它们确实起作用。我不知道它们是如何工作的，而且我真的不想知道。我想把时间花在自己的代码和业务逻辑上。感谢babel-preset-env，它让我从 Babel 配置地狱中解放了出来。
babel-preset-env 拉取了一堆依赖项，但我认为这是值得的。我也喜欢声明式风格。
此外，yarn install 现在变成了 yarn add。 - Roman Usherenko更新: Babel 7 post还提供了更深入的答案。
从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 .
},
}]
]
将会根据你的target自动使用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/runtime的@babel/transform-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
corejs填充，你需要将@babel/runtime替换为@babel/runtime-corejs2(对于"corejs": 2)或@babel/runtime-corejs3(对于"corejs": 3)。2或3的corejs选项，则应使用@babel/runtime-corejs2或@babel/runtime-corejs3。文档中已经提到了这一点：https://babeljs.io/docs/en/babel-plugin-transform-runtime#corejs - Robin-Hoodie如果您不需要babel-polyfill提供的所有模块，您可以在webpack配置中仅指定babel-regenerator-runtime：
module.exports = {
entry: ['babel-regenerator-runtime', './test.js'],
// ...
};
使用webpack-dev-server和HMR时，这样做可以大大减少每次构建需要编译的文件数量。该模块作为babel-polyfill的一部分安装，因此如果您已经安装了该模块，那么就没问题了；否则，您可以使用 npm i -D babel-regenerator-runtime 单独安装它。
我的简单解决方案：
npm install --save-dev babel-plugin-transform-runtime
npm install --save-dev babel-plugin-transform-async-to-generator
.babelrc
{
"presets": [
["latest", {
"es2015": {
"loose": true
}
}],
"react",
"stage-0"
],
"plugins": [
"transform-runtime",
"transform-async-to-generator"
]
}
loose: true 吗？ - Tom Söderlund当没有正确使用Babel插件时，使用async/await函数会导致此错误。截至2020年3月，以下应该是你需要做的全部内容。（在Babel中，@babel/polyfill和很多被接受的解决方案已经被弃用。 在Babel文档中了解更多信息。）
在命令行中键入：
npm install --save-dev @babel/plugin-transform-runtime
babel.config.js文件中，添加此插件@babel/plugin-transform-runtime。注意：下面的示例包括我最近为一个小型React / Node / Express项目使用的其他预设和插件：module.exports = {
presets: ['@babel/preset-react', '@babel/preset-env'],
plugins: ['@babel/plugin-proposal-class-properties',
'@babel/plugin-transform-runtime'],
};
.babelrc文件看起来是这样的：{
"presets": [
"@babel/preset-env"
],
"plugins": [
"@babel/plugin-transform-runtime"
]
} - AnthonyUncaught ReferenceError: require is not defined。 - Thieliciousbabel-regenerator-runtime现在已弃用, 取而代之应该使用regenerator-runtime。
要在webpack和babel v7中使用运行时生成器：
安装regenerator-runtime：
npm i -D regenerator-runtime
然后在webpack配置中添加：
entry: [
'regenerator-runtime/runtime',
YOUR_APP_ENTRY
]
@babel/preset-env的useBuiltIns的目的，即根据您的目标浏览器动态插入运行时。 - kyw根据以下示例更新您的.babelrc文件，它将正常工作。
如果您使用的是@babel/preset-env包
{
"presets": [
[
"@babel/preset-env", {
"targets": {
"node": "current"
}
}
]
]
}
or if you are using babel-preset-env package
{
"presets": [
[
"env", {
"targets": {
"node": "current"
}
}
]
]
}
targets似乎是指这个：您支持/针对项目的环境，而targets.node是这个：如果您想要编译当前节点版本，可以指定“node”：true或“node”：“current”，这将与“node”：process.versions.node相同。 - user1063287