Javascript Babel 6 regeneratorRuntime 未定义

Babel 6 regeneratorRuntime is not defined

提问by BrunoLM

I'm trying to use async, await from scratch on Babel 6, but I'm getting regeneratorRuntime is not defined.

我正在尝试使用 async，在 Babel 6 上从头开始等待，但是我发现 regeneratorRuntime 未定义。

.babelrc file

.babelrc 文件

{
    "presets": [ "es2015", "stage-0" ]
}

package.json file

package.json 文件

"devDependencies": {
    "babel-core": "^6.0.20",
    "babel-preset-es2015": "^6.0.15",
    "babel-preset-stage-0": "^6.0.15"
}

.js file

.js 文件

"use strict";
async function foo() {
  await bar();
}
function bar() { }
exports.default = foo;

Using it normally without the async/await works just fine. Any ideas what I'm doing wrong?

在没有 async/await 的情况下正常使用它就可以了。任何想法我做错了什么？

回答by BrunoLM

babel-polyfillis required. You must also install it in order to get async/await working.

babel-polyfill是必须的。您还必须安装它才能使 async/await 工作。

npm i -D babel-core babel-polyfill babel-preset-es2015 babel-preset-stage-0 babel-loader

package.json

包.json

"devDependencies": {
  "babel-core": "^6.0.20",
  "babel-polyfill": "^6.0.16",
  "babel-preset-es2015": "^6.0.15",
  "babel-preset-stage-0": "^6.0.15"
}

.babelrc

.babelrc

{
  "presets": [ "es2015", "stage-0" ]
}

.js with async/await (sample code)

.js 与 async/await（示例代码）

"use strict";

export default async function foo() {
  var s = await bar();
  console.log(s);
}

function bar() {
  return "bar";
}

In the startup file

在启动文件中

require("babel-core/register");
require("babel-polyfill");

If you are using webpackyou need to put it as the first value of your entryarray in your webpack configuration file (usually webpack.config.js), as per @Cemen comment:

如果你使用webpack，你需要将它作为entry你的 webpack 配置文件中数组的第一个值（通常是webpack.config.js），根据@Cemen 评论：

module.exports = {
  entry: ['babel-polyfill', './test.js'],

  output: {
    filename: 'bundle.js'       
  },

  module: {
    loaders: [
      { test: /\.jsx?$/, loader: 'babel', }
    ]
  }
};

If you want to run tests with babel then use:

如果要使用 babel 运行测试，请使用：

mocha --compilers js:babel-core/register --require babel-polyfill

回答by johnny

Besides polyfill, I use babel-plugin-transform-runtime. The plugin is described as:

除了 polyfill，我还使用babel-plugin-transform-runtime。该插件描述为：

Externalize references to helpers and builtins, automatically polyfilling your code without polluting globals. What does this actually mean though? Basically, you can use built-ins such as Promise, Set, Symbol etc as well use all the Babel features that require a polyfill seamlessly, without global pollution, making it extremely suitable for libraries.

外部化对帮助程序和内置函数的引用，自动填充您的代码而不会污染全局变量。这实际上意味着什么？基本上，你可以使用 Promise、Set、Symbol 等内置函数，也可以无缝使用所有需要 polyfill 的 Babel 特性，没有全局污染，使其非常适合库。

It also includes support for async/await along with other built-ins of ES 6.

它还包括对 async/await 以及 ES 6 的其他内置插件的支持。

$ npm install --save-dev babel-plugin-transform-runtime

In .babelrc, add the runtime plugin

在 中.babelrc，添加运行时插件

{
  "plugins": [
    ["transform-runtime", {
      "regenerator": true
    }]
  ]
}

NoteIf you're using babel 7, the package has been renamed to @babel/plugin-transform-runtime.

注意如果您使用的是 babel 7，则该包已重命名为@babel/plugin-transform-runtime。

回答by Matt Shirley

Babel 7 Users

Babel 7 用户

I had some trouble getting around this since most information was for prior babel versions. For Babel 7, install these two dependencies:

我在解决这个问题时遇到了一些麻烦，因为大多数信息都是针对以前的 babel 版本的。对于 Babel 7，安装这两个依赖项：

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

And, in .babelrc, add:

并且，在 .babelrc 中，添加：

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        ["@babel/transform-runtime"]
    ]
}

回答by Tyler Long

Update

更新

It works if you set the target to Chrome. But it might not work for other targets, please refer to: https://github.com/babel/babel-preset-env/issues/112

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

So this answer is NOTquite proper for the original question. I will keep it here as a reference to babel-preset-env.

所以这个答案是不是对原来的问题很妥当。我会把它留在这里作为参考babel-preset-env。

A simple solution is to add import 'babel-polyfill'at the beginning of your code.

一个简单的解决方案是import 'babel-polyfill'在代码的开头添加。

If you use webpack, a quick solution is to add babel-polyfillas shown below:

如果你使用 webpack，一个快速的解决方案是添加babel-polyfill如下所示：

entry: {
    index: ['babel-polyfill', './index.js']
}

I believe I've found the latest best practice.

我相信我已经找到了最新的最佳实践。

Check this project: https://github.com/babel/babel-preset-env

检查这个项目：https: //github.com/babel/babel-preset-env

yarn add --dev babel-preset-env

Use the following as your babel configuration:

使用以下作为你的 babel 配置：

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 Chrome versions"]
      }
    }]
  ]
}

Then your app should be good to go in the last 2 versions of Chrome browser.

那么您的应用应该可以很好地用于 Chrome 浏览器的最后 2 个版本。

You can also set Nodeas the targets or fine-tune the browsers list according to https://github.com/ai/browserslist

您还可以将Node设置为目标或根据https://github.com/ai/browserslist微调浏览器列表

Tell me what, don't tell me how.

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

I really like babel-preset-env's philosophy: tell me which environment you want to support, do NOT tell me how to support them. It's the beauty of declarative programming.

我真的很喜欢babel-preset-env的理念：告诉我你想支持哪个环境，不要告诉我如何支持它们。这就是声明式编程的美妙之处。

I've tested asyncawaitand they DO work. I don't know how they work and I really don't want to know. I want to spend my time on my own code and my business logic instead. Thanks to babel-preset-env, it liberates me from the Babel configuration hell.

我已经测试过了asyncawait，它们确实有效。我不知道它们是如何工作的，我真的不想知道。我想把时间花在我自己的代码和我的业务逻辑上。感谢babel-preset-env，它将我从 Babel 配置地狱中解放出来。

回答by Antony Mativos

Alternatively, if you don't need all the modules babel-polyfillprovides, you can just specify babel-regenerator-runtimein your webpack config:

或者，如果您不需要所有babel-polyfill提供的模块，您只需babel-regenerator-runtime在 webpack 配置中指定：

module.exports = {
  entry: ['babel-regenerator-runtime', './test.js'],

  // ...
};

When using webpack-dev-server with HMR, doing this reduced the number of files it has to compile on every build by quite a lot. This module is installed as part of babel-polyfillso if you already have that you're fine, otherwise you can install it separately with npm i -D babel-regenerator-runtime.

将 webpack-dev-server 与 HMR 结合使用时，这样做可以大大减少每次构建时必须编译的文件数量。这个模块是作为一部分安装的，babel-polyfill所以如果你已经有了你就可以了，否则你可以用npm i -D babel-regenerator-runtime.

回答by E. Fortes

My simple solution:

我的简单解决方案：

npm install --save-dev babel-plugin-transform-runtime
npm install --save-dev babel-plugin-transform-async-to-generator

.babelrc

.babelrc

{
  "presets": [
    ["latest", {
      "es2015": {
        "loose": true
      }
    }],
    "react",
    "stage-0"
  ],
  "plugins": [
    "transform-runtime",
    "transform-async-to-generator"
  ]
}

回答by ford04

Babel 7.4.0 or later (core-js 2 / 3)

Babel 7.4.0 或更高版本 (core-js 2 / 3)

As of Babel 7.4.0, @babel/polyfillisdeprecated.

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

In general, there are two ways to install polyfills/regenerator: via global namespace (Option 1) or as ponyfill (Option 2, without global pollution).

一般来说，有两种安装 polyfills/regenerator 的方法：通过全局命名空间（选项 1）或作为 ponyfill（选项 2，没有全局污染）。

---

---

Option 1:@babel/preset-env

选项1：@babel/preset-env

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

will automatically use regenerator-runtimeand core-jsaccording to your target. No need to import anything manually. Don't forget to install runtime dependencies:

将自动使用regenerator-runtime并core-js根据您的目标。无需手动导入任何内容。不要忘记安装运行时依赖项：

npm i --save regenerator-runtime core-js

Alternatively, set useBuiltIns: "entry"and import it manually:

或者，useBuiltIns: "entry"手动设置并导入它：

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

---

---

Option 2:@babel/transform-runtimewith @babel/runtime(no global scope pollution)

选项 2：@babel/transform-runtimewith @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

If you use core-js polyfills, you install @babel/runtime-corejs2or @babel/runtime-corejs3instead, see here.

如果您使用 core-js polyfills，请安装@babel/runtime-corejs2或@babel/runtime-corejs3替代，请参阅此处。

Cheers

干杯

回答by jony89

babel-regenerator-runtimeis now deprecated, instead one should use regenerator-runtime.

babel-regenerator-runtime现在已弃用，而应使用regenerator-runtime.

To use the runtime generator with webpackand babelv7:

要使用与运行时发电机webpack和babelV7：

install regenerator-runtime:

安装regenerator-runtime：

npm i -D regenerator-runtime

And then add within webpack configuration :

然后在 webpack 配置中添加：

entry: [
  'regenerator-runtime/runtime',
  YOUR_APP_ENTRY
]

回答by Zero

Update your .babelrcfile according to the following examples, it will work.

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

If you are using @babel/preset-envpackage

如果您正在使用@babel/preset-env包

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

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

回答by Ally

Be careful of hoisted functions

小心提升的功能

I had both my 'polyfill import' and my 'async function' in the same file, however I was using the function syntax that hoists it above the polyfill which would give me the ReferenceError: regeneratorRuntime is not definederror.

我的“polyfill import”和“async function”都在同一个文件中，但是我使用的函数语法将它提升到 polyfill 上方，这会给我带来ReferenceError: regeneratorRuntime is not defined错误。

Change this code

更改此代码

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

to this

对此

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

to prevent it being hoisted above the polyfill import.

以防止它被提升到 polyfill 导入上方。