English 我正在尝试使用异步，在Babel 6上从头开始，但是我得到的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;
正常使用它而不需要异步/等待就可以了。有什么想法我做错了吗？
如果您使用Gulp + Babel作为前端，则需要使用babel-polyfill
npm install babel-polyfill
然后在所有其他脚本标签上方将脚本标签添加到index.html，并从node_modules引用babel-polyfill
我的babel 7工作样板可与再生器运行时反应：
.babelrc
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": true,
},
},
],
"@babel/preset-react",
],
"plugins": [
"@babel/plugin-syntax-class-properties",
"@babel/plugin-proposal-class-properties"
]
}
package.json
...
"devDependencies": {
"@babel/core": "^7.0.0-0",
"@babel/plugin-proposal-class-properties": "^7.4.4",
"@babel/plugin-syntax-class-properties": "^7.2.0",
"@babel/polyfill": "^7.4.4",
"@babel/preset-env": "^7.4.5",
"@babel/preset-react": "^7.0.0",
"babel-eslint": "^10.0.1",
...
main.js
import "@babel/polyfill";
....
要babel7用户和ParcelJS> = 1.10.0用户
npm i @babel/runtime-corejs2
npm i --save-dev @babel/plugin-transform-runtime @babel/core
.babelrc
{
"plugins": [
["@babel/plugin-transform-runtime", {
"corejs": 2
}]
]
}
新答案为什么您遵循我的答案？
回答：因为我将为您提供最新更新版本的npm project的答案。
2017年04月14日
"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的回答。
您收到错误消息是因为异步/等待使用生成器，这是ES2016的功能，而不是ES2015。解决此问题的一种方法是为ES2016（npm install --save babel-preset-es2016）安装babel预设，然后编译为ES2016而不是ES2015：
"presets": [
"es2016",
// etc...
]
如其他答案所述，您也可以使用polyfills（尽管请确保在运行任何其他代码之前先加载polyfill）。另外，如果您不想包括所有的polyfill依赖项，则可以使用babel-regenerator-runtime或babel-plugin-transform-runtime。
截至2019年10月，这对我有效：
将此添加到预设。
"presets": [
"@babel/preset-env"
]
然后使用npm安装regenerator-runtime。
npm i regenerator-runtime
然后在您的主文件中使用：（此导入仅使用一次）
import "regenerator-runtime/runtime";
这将使您能够async awaits在文件中使用并删除regenerator error
如果使用，babel-preset-stage-2则只需使用启动脚本--require babel-polyfill。
就我而言，这个错误是由Mocha测试抛出的。
以下解决了这个问题
mocha \"server/tests/**/*.test.js\" --compilers js:babel-register --require babel-polyfill
我的“ polyfill import”和“异步函数”都在同一个文件中，但是我使用的函数语法将其提升到polyfill之上，这会给我带来ReferenceError: regeneratorRuntime is not defined错误。
import "babel-polyfill"
async function myFunc(){ }
import "babel-polyfill"
var myFunc = async function(){}
以防止将其悬挂在polyfill进口上方。
.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"
}
}
]
]
}
从Babel 7.4.0开始，@babel/polyfill 已 弃用。
通常，有两种安装Polyfills / regenerator的方法：通过全局名称空间（选项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 .
},
}]
]
会自动使用regenerator-runtime并core-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
...
}
]
]
}
安装它：
npm i -D @babel/plugin-transform-runtime
npm i @babel/runtime
如果您使用core-js polyfills，请安装@babel/runtime-corejs2或@babel/runtime-corejs3代替，请参见此处。
干杯
我的简单解决方案：
npm install --save-dev babel-plugin-transform-runtime
npm install --save-dev babel-plugin-transform-async-to-generator
.babelrc
{
"presets": [
["latest", {
"es2015": {
"loose": true
}
}],
"react",
"stage-0"
],
"plugins": [
"transform-runtime",
"transform-async-to-generator"
]
}
除了polyfill之外，我还使用babel-plugin-transform-runtime。该插件描述为：
外部化对助手和内置函数的引用，自动填充代码而不会污染全局变量。这实际上是什么意思？基本上，您可以使用Promise，Set，Symbol等内置函数，也可以无缝使用需要Polyfill的所有Babel功能，而不会造成全球污染，这使其非常适合于图书馆。
它还包括对异步/等待以及ES 6的其他内置支持。
$ npm install --save-dev babel-plugin-transform-runtime
在中.babelrc，添加运行时插件
{
"plugins": [
["transform-runtime", {
"regenerator": true
}]
]
}
注意 如果使用的是babel 7，则该软件包已重命名为@ babel / plugin-transform-runtime。
Babel 7用户
我遇到了一些麻烦，因为大多数信息都针对先前的babel版本。对于Babel 7，安装以下两个依赖项：
npm install --save @babel/runtime
npm install --save-dev @babel/plugin-transform-runtime
并且，在.babelrc中，添加：
{
"presets": ["@babel/preset-env"],
"plugins": [
["@babel/transform-runtime"]
]
}
供将来参考：
自Babel版本7.0.0-beta.55起，舞台预设已删除
请参阅博客https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets
异步等待仍然可以被
https://babeljs.io/docs/zh-CN/babel-plugin-transform-async-to-generator#usage
安装
.babelrc中的用法
并使用babel polyfill https://babeljs.io/docs/en/babel-polyfill
安装
webpack.config.js