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


当前回答

如果您正在使用next js,请从“再生器运行时”添加import regeneratorRuntime;对于引发错误的文件,对我来说,该文件是document.js。

并添加

[
  "@babel/plugin-transform-regenerator",
  {
    "asyncGenerators": false,
    "generators": false,
    "async": false
  }
]

在插件中,位于.babelrc文件内。

其他回答

如果您使用Gulp+Babel作为前端,则需要使用Babel polyfill

npm安装babel polyfill

然后在所有其他脚本标记之上向index.html添加一个脚本标记,并引用node_modules中的babel polyfill

在2019年Babel 7.4.0+中,Babel polyfill包已被弃用,转而直接包含core js/stable(core-js@3+,到polyfill ECMAScript功能)和再生器运行时/运行时(需要使用转译生成器函数):

import "core-js/stable";
import "regenerator-runtime/runtime";

babel polyfill文档中的信息。

如果你正在构建一个应用程序,你只需要@babel/preset-env和@babel/polyfill:

npm i -D @babel/preset-env
npm i @babel/polyfill

(注意:您不需要安装core js和再生器运行时包,因为它们都将由@babel/polyfill安装)

然后在.babelrc中:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry"  // this is the key. use 'usage' for further codesize reduction, but it's still 'experimental'
      }
    ]
  ]
}

现在设置目标环境。在这里,我们在.browserlistrc文件中执行此操作:

# Browsers that we support

>0.2%
not dead
not ie <= 11
not op_mini all

最后,如果使用useBuiltIns:“entry”,请将import@babel/polyfill放在条目文件的顶部。否则,你就完蛋了。

使用此方法将有选择地导入那些polyfills和“再生器运行时”文件(此处未定义修复再生器的运行时问题),前提是任何目标环境/浏览器都需要它们。

需要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

我需要支持的目标浏览器已经支持异步/等待,但是在编写mocha测试时,如果没有正确的设置,我仍然会遇到这个错误。

我在谷歌上搜索的大多数文章都过时了,包括这里的公认答案和高投票率答案,即你不需要polyfill、babel再生器运行时、babel插件转换运行时。如果您的目标浏览器已经支持异步/等待(当然,如果您不需要polyfill)

我也不想使用webpack。

泰勒·龙的答案实际上是正确的,因为他建议babel预置env(但我先省略了它,因为他在开头提到了polifill)。我仍然得到了ReferenceError:regeneratorRuntime最初没有定义,然后我意识到这是因为我没有设置目标。为节点设置目标后,我修复了再生器运行时错误:

  "scripts": {
    //"test": "mocha --compilers js:babel-core/register"
    //https://github.com/mochajs/mocha/wiki/compilers-deprecation
    "test": "mocha --require babel-core/register"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "mocha": "^5.2.0"
  },
  //better to set it .bablerc, I list it here for brevity and it works too.
  "babel": {
    "presets": [
      ["env",{
        "targets": {
          "node": "current"
           "chrome": 66,
           "firefox": 60,
        },
        "debug":true
      }]
    ]
  }