我正在尝试在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正常运行。有什么想法我做错了吗？
我的用于React的Babel 7样板文件，并包含regenerator runtime：
.babelrc
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": true,
},
},
],
"@babel/preset-react",
],
"plugins": [
"@babel/plugin-syntax-class-properties",
"@babel/plugin-proposal-class-properties"
]
}
package.json
...
"devDependencies": {
"@babel/core": "^7.0.0-0",
"@babel/plugin-proposal-class-properties": "^7.4.4",
"@babel/plugin-syntax-class-properties": "^7.2.0",
"@babel/polyfill": "^7.4.4",
"@babel/preset-env": "^7.4.5",
"@babel/preset-react": "^7.0.0",
"babel-eslint": "^10.0.1",
...
main.js
import "@babel/polyfill";
....
您可以通过以下最简单的方法解决控制台中出现的“regeneratorRuntime未定义”的问题：
无需安装任何不必要的插件，只需在您的index.html文件的body标签内添加以下代码：
<script src="https://unpkg.com/regenerator-runtime@0.13.1/runtime.js"></script>
现在，当您运行babel时，regeneratorRuntime应该被定义，并且您的async/await函数应该被成功编译为ES2015。
新回答 你为什么要关注我的回答？
答：因为我将给您提供一个最新更新版本的npm项目的答案。
04/14/2017
"name": "es6",
"version": "1.0.0",
"babel-core": "^6.24.1",
"babel-loader": "^6.4.1",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"webpack": "^2.3.3",
"webpack-dev-server": "^2.4.2"
webpack.config.js
module.exports = {
entry: ["babel-polyfill", "./app/js"]
};
webpack.config.js文件后，只需将以下代码添加到您的代码顶部即可。import "babel-polyfill";
现在检查一切是否正常。参考链接
还要感谢@BrunoLM提供的好答案。
只需使用以下命令安装regenerator-runtime：
npm i regenerator-runtime
在引入服务器文件之前，在启动文件中添加以下行
require("regenerator-runtime/runtime");
到目前为止，这对我一直有效
对于想要使用babel-polyfill版本7^的人，请在webpack ver3^中进行以下操作。
安装模块npm i -D @babel/polyfill
然后在您的webpack文件中，在您的entry点处执行此操作
entry: ['@babel/polyfill', path.resolve(APP_DIR, 'App.js')],
npm i @babel/runtime-corejs2
npm i --save-dev @babel/plugin-transform-runtime @babel/core
.babelrc
{
"plugins": [
["@babel/plugin-transform-runtime", {
"corejs": 2
}]
]
}
gulp.task('scripts', () => {
return rollup({
entry: './app/scripts/main.js',
format: "iife",
sourceMap: true,
plugins: [babel({
exclude: 'node_modules/**',
"presets": [
[
"es2015-rollup"
]
],
"plugins": [
"external-helpers"
]
}),
includePaths({
include: {},
paths: ['./app/scripts'],
external: [],
extensions: ['.js']
})]
})
.pipe(source('app.js'))
.pipe(buffer())
.pipe(sourcemaps.init({
loadMaps: true
}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('.tmp/scripts'))
.pipe(reload({ stream: true }));
});
如果出现这种情况，解决方案是将babel-polyfill作为 bower 组件包含：
bower install babel-polyfill --save
并将其添加为index.html中的依赖项：
<script src="/bower_components/babel-polyfill/browser-polyfill.js"></script>
1 - 安装 babel-plugin-transform-async-to-module-method、babel-polyfil、bluebird、babel-preset-es2015 和 babel-core：
npm install babel-plugin-transform-async-to-module-method babel-polyfill bluebird babel-preset-es2015 babel-core
2 - 在你的js文件中添加babel polyfill：
import 'babel-polyfill';
3 - 在你的.babelrc文件中添加插件：
{
"presets": ["es2015"],
"plugins": [
["transform-async-to-module-method", {
"module": "bluebird",
"method": "coroutine"
}]
]
}
来源: http://babeljs.io/docs/plugins/transform-async-to-module-method/
这个插件将异步函数转换为使用Promise对象的普通函数。它不仅可以在浏览器中使用，还可以在node.js环境中使用。它提供了一种将异步函数编写为常规函数的方法，以避免回调地狱的问题。我以前使用 webpack 进行设置，其中包含 presets: ['es2015', 'stage-0']
以及 mocha，这使得测试可以通过 webpack 进行编译。
要让我的测试中的 async/await 起作用，我所需做的只是在 mocha 中使用 --require babel-polyfill 选项：
mocha --require babel-polyfill
import regeneratorRuntime from "regenerator-runtime";，对于我来说，文件是_document.js。[
"@babel/plugin-transform-regenerator",
{
"asyncGenerators": false,
"generators": false,
"async": false
}
]
在插件中，位于.babelrc文件内。