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


当前回答

供将来参考:

从Babel版本7.0.0-beta.55起,已删除舞台预设

参考博客https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets

异步等待仍然可以由

https://babeljs.io/docs/en/babel-plugin-transform-async-to-generator#usage

安装

npm install --save-dev @babel/plugin-transform-async-to-generator

babelrc中的用法

 { 
     "presets": ["@babel/preset-env"],
     "plugins": ["@babel/plugin-transform-async-to-generator"]
 }

并使用babel polyfillhttps://babeljs.io/docs/en/babel-polyfill

安装

npm install --save @babel/polyfill

webpack.config.js

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

其他回答

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

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

babelrc语言:

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

如果你正在构建一个应用程序,你只需要@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和“再生器运行时”文件(此处未定义修复再生器的运行时问题),前提是任何目标环境/浏览器都需要它们。

您会收到一个错误,因为async/await使用的生成器是ES2016特性,而不是ES2015。解决此问题的一种方法是为ES2016安装babel预设(npm install--save babel-preset-ES2016),并编译为ES2016而不是ES2015:

"presets": [
  "es2016",
  // etc...
]

正如其他答案所提到的,您也可以使用polyfill(尽管确保在运行任何其他代码之前先加载polyfill)。或者,如果不想包含所有polyfill依赖项,可以使用babel再生器运行时或babel插件转换运行时。

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

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

只需安装:

npm install --save-dev @babel/plugin-transform-runtime

并将其添加到Babel的插件数组中。