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


当前回答

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

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

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

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

其他回答

1-安装babel插件,将异步转换为模块方法,babel polyfil,蓝鸟,babel-reset-es2015,babel芯:

npm install babel-plugin-transform-async-to-module-method babel-polyfill bluebird babel-preset-es2015 babel-core

2-添加js babel polyfill:

导入“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/

使现代化

如果你将目标设置为Chrome,它就会起作用。但它可能不适用于其他目标,请参阅:https://github.com/babel/babel-preset-env/issues/112

因此,这个答案对于最初的问题来说不太合适。我将把它保存在这里,作为babel预置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浏览器中使用。

您还可以将节点设置为目标,或根据https://github.com/ai/browserslist

告诉我什么,不要告诉我怎么做。

我真的很喜欢babel preset env的哲学:告诉我你想要支持哪个环境,而不是告诉我如何支持它们。这是声明式编程的优点。

我已经测试了异步等待,它们确实有效。我不知道它们是如何工作的,我真的不想知道。我想把时间花在我自己的代码和业务逻辑上。多亏了babel预置env,它将我从babel配置地狱中解放出来。

我使用了来自https://github.com/babel/babel/issues/9849#issuecomment-592668815,并将targets:{esmodules:true,}添加到我的babel.config.js。

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          esmodules: true,
        },
      },
    ],
  ],
}

我有regeneratorRuntime未定义错误当我在react应用程序中使用“异步”和“等待”时“async”和“await”是ES7中的新关键字为此,您应该使用babel-preset-es2017安装此devDependencies:

`

“babel-preset-es2017”:“^6.24.1”,“babel预设反应”:“^6.24.1”,“babel-preset-stage-0”:“^6.24.1”`

并使用此

“预设”:[“es2017”,“stage-0”,“react”]

当我尝试使用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>