未定义Babel 6再生器运行时

我正在尝试在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用户

我很难绕过这个问题，因为大多数信息都是以前的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"]
    ]
}

其他回答

我在尝试运行Mocha+Babel时遇到了这个问题。我有一个.babelrc在开发中运行（请参阅这里的其他答案，它们很完整），但我的npm运行测试命令仍然在抱怨regeneratorRuntime没有定义。所以我修改了package.json：

"scripts": {
  "test": "mocha --require babel-polyfill --require babel-core/register tests/*.js"
}

阅读更多信息：https://babeljs.io/en/setup/#mocha-4

使现代化

如果你将目标设置为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配置地狱中解放出来。

对于希望使用babel polyfill版本7^的用户，请使用webpack ver3^进行此操作。

Npm安装模块Npm i-D@babel/polyfill

然后在入口点的webpack文件中执行以下操作

entry: ['@babel/polyfill', path.resolve(APP_DIR, 'App.js')],

小心吊装功能

我的“polyfill导入”和“异步函数”都在同一个文件中，但我使用的是将其提升到polyfill之上的函数语法，这会给我带来ReferenceError:regeneratorRuntime未定义错误。

更改此代码

import "babel-polyfill"
async function myFunc(){ }

到此为止

import "babel-polyfill"
var myFunc = async function(){}

以防止其悬挂在polyfill进口上方。

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

并添加

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

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

推荐文章