我正在尝试在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的情况下正常使用它,效果很好。知道我做错了什么吗?


当前回答

笔记如果您使用的是babel7,则该包已重命名为@babel/plugin-transform runtime。

除了polyfill,我还使用babel插件转换运行时。插件描述如下:

外部化对助手和内置程序的引用,自动聚合填充代码而不会污染全局。这到底意味着什么?基本上,您可以使用Promise、Set、Symbol等内置功能,也可以无缝使用所有需要polyfill的Babel功能,而不会造成全局污染,因此非常适合于库。

它还支持异步/等待以及ES6的其他内置功能。

$ npm install --save-dev babel-plugin-transform-runtime

在.babelrc中,添加运行时插件

{
  "plugins": [
    ["transform-runtime", {
      "regenerator": true
    }]
  ]
}

其他回答

这些答案中的大多数都推荐了使用WebPack处理此错误的解决方案。但如果有人在使用RollUp(就像我一样),以下是最终对我有效的方法(只需一个提示,将这个polyfill广告捆绑在一起,总输出大小约为10k):

巴氏合金

{
    "presets": [
        [
            "env",
            {
                "modules": false,
                "targets": {
                    "browsers": ["last 2 versions"]
                }
            }
        ]
    ],
    "plugins": ["external-helpers",
        [
            "transform-runtime",
            {
                "polyfill": false,
                "regenerator": true
            }
        ]]
}

汇总配置.js

import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
import uglify from 'rollup-plugin-uglify';
import commonjs from 'rollup-plugin-commonjs';


export default {
    input: 'src/entry.js',
    output: {
        file: 'dist/bundle.js',
        format: 'umd',
        name: 'MyCoolLib',
        exports: 'named'
    },
    sourcemap: true,
    plugins: [
        commonjs({
            // polyfill async/await
            'node_modules/babel-runtime/helpers/asyncToGenerator.js': ['default']
        }),
        resolve(),
        babel({
            runtimeHelpers: true,
            exclude: 'node_modules/**', // only transpile our source code
        }),
        uglify()

    ]
};

对于希望使用babel polyfill版本7^的用户,请使用webpack ver3^进行此操作。

Npm安装模块Npm i-D@babel/polyfill

然后在入口点的webpack文件中执行以下操作

entry: ['@babel/polyfill', path.resolve(APP_DIR, 'App.js')],

尝试将其添加到package.json中

"browserslist": [
  "last 2 Chrome versions"
]

这对我有用!

需要babel polyfill(自babel 7.4起已弃用)。您还必须安装它才能使异步/等待工作。

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"
}

巴氏合金

{
  "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,则需要将其作为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

在控制台中修复此“regeneratorRuntime未定义问题”的最简单方法:

你不必安装任何不必要的插件。只需添加:

<script src=“https://unpkg.com/regenerator-runtime@0.13.1/runtime.js“></script>

在你的index.html中。现在,一旦您运行babel,就应该定义regeneratorRuntime,现在您的异步/等待函数应该成功编译到ES2015中