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


当前回答

新答案你为什么要听我的答案?

答:因为我将用最新的更新版本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"

如果您使用此版本或更高版本的Npm和所有其他。。。所以只需要改变:

webpack.config.js

module.exports = {
  entry: ["babel-polyfill", "./app/js"]
};

更改webpack.config.js文件后,只需将这一行添加到代码顶部。

import "babel-polyfill";

现在检查一切是否正常。参考链接

也感谢@BrunoLM的回答。

其他回答

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

当我尝试使用ES6生成器时,使用gulf with rollup时会出现以下错误:

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>

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

并添加

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

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

安装@babel polyfill并将其保存在开发依赖项中

npm安装--保存dev@babel/polyfill

复制和粘贴需要(“@babel/polyfill”);在输入文件的顶部

入口.js

require("@babel/polyfill"); // this should be include at the top

在条目数组中添加@babel/polyfill您需要在预设数组中预设env

webpack.config.js

常量路径=require('path');要求(“@babel/polyfill”);//必要的,必要的模块导出={条目:['@babel/polyfill','./src/js/index.js'],输出:{路径:路径.解析(__dirname,'to_be_deployed/js'),文件名:'main.js'},模块:{规则:[{测试:/\.m?js$/,exclude:/node_modules/,使用:{loader:“babel loader”,选项:{预设:['@babel/preset-env']}}}]},mode:'开发'}