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


当前回答

我有使用webpack/babel构建的异步等待:

"devDependencies": {
    "babel-preset-stage-3": "^6.11.0"
}

babelrc语言:

"presets": ["es2015", "stage-3"]

其他回答

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/

更新:Babel 7的帖子也有更深入的答案。


Babel 7.4.0或更高版本(核心js 2/3)

从Babel 7.4.0开始,@Babel/polyfill已弃用。

通常,有两种方法安装polyfills/reduator:通过全局命名空间(选项1)或作为ponyfill(选项2,无全局污染)。


选项1:@babel/preset-env

presets: [
  ["@babel/preset-env", {
    "useBuiltIns": "usage",
    "corejs": 3, // or 2,
    "targets": {
        "firefox": "64", // or whatever target to choose .    
    },
  }]
]

将根据您的目标自动使用再生器运行时和核心js。无需手动导入任何内容。不要忘记安装运行时依赖项:

npm i --save regenerator-runtime core-js

或者,设置useBuiltIns:“entry”并手动导入:

import "regenerator-runtime/runtime";
import "core-js/stable"; // if polyfills are also needed

选项2:@babel/transform runtime和@babel/runtime

这种替代方案没有全球范围的污染,适用于图书馆。

{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "regenerator": true,
        "corejs": 3 // or 2; if polyfills needed
        ...
      }
    ]
  ]
}
Install it:
npm i -D @babel/plugin-transform-runtime
npm i @babel/runtime

如果使用了corejs polyfill,则将@babel/runtime替换为@babel/runtime-corejs2(对于“corejs”:2)或@babel/runtime-corejs3(对于“corejs”:3)。

根据以下示例更新.babelrc文件,它将起作用。

如果您使用的是@babel/preset-env包

{
  "presets": [
    [
      "@babel/preset-env", {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}
or if you are using babel-preset-env package

{
  "presets": [
    [
      "env", {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}

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

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

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

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