Babel 6 regeneratorRuntime没有定义

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

我正在尝试使用异步，在Babel 6上从头开始等待，但是我得到regeneratorRuntime没有定义。

.babelrc file

.babelrc文件

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

package.json file

包中。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?

通常在不使用异步/ wait的情况下使用它是可行的。你知道我做错了什么吗?

19 个解决方案

#1

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

babel-polyfill是必需的。您还必须安装它以获得异步/等待工作。

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

package.json

package.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与异步/等待(示例代码)

"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 webpack you need to put it as the first entry as per @Cemen comment:

如果你正在使用webpack，你需要把它作为第一个条目，如@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

#2

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.

外部化对helper和builtins的引用，在不污染全局的情况下自动聚合代码。这到底是什么意思呢?基本上，您可以使用内置的功能，如承诺、设置、符号等，也可以使用所有需要多填充的Babel特性，而不会造成全局污染，使其非常适合于库。

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

它还包括对异步/等待以及其他ES 6的内置程序的支持。

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

In .babelrc, add the runtime plugin

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

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

#3

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 NOT quite 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.

一个简单的解决方案是在代码的开头添加导入“babel-polyfill”。

If you use webpack, a quick solution is to add babel-polyfill as 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浏览器的最后两个版本中使用。

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

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

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.

我真的很喜欢巴伯-preset-env的哲学:告诉我你想支持哪一种环境，不要告诉我如何支持它们。这就是声明式编程的美妙之处。

I've tested async await and 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.

我已经测试过异步等待，它们确实有效。我不知道它们是怎么工作的，我也不想知道。我想把时间花在我自己的代码和业务逻辑上。感谢Babel -preset-env，它让我从Babel配置地狱中解放出来。

#4

Alternatively, if you don't need all the modules babel-polyfill provides, you can just specify babel-regenerator-runtime in your webpack config:

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

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-polyfill so if you already have that you're fine, otherwise you can install it separately with npm i -D babel-regenerator-runtime.

在使用HMR的webpack-dev-server时，这样做会减少每次编译时需要编译的文件的数量。这个模块是作为babel-polyfill的一部分安装的，所以如果你已经有了这个功能，那么你可以单独安装它，使用npm i -D babel-regenerator-runtime。

#5

My simple solution:

我的简单的解决方案:

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

.babelrc

.babelrc

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

#6

If using babel-preset-stage-2 then just have to start the script with --require babel-polyfill.

如果使用babel-preset- 2，那么只需要在脚本开始时使用——需要babel-polyfill。

In my case this error was thrown by Mocha tests.

在我的例子中，这个错误是由Mocha测试抛出的。

Following fixed the issue

后固定的问题

mocha \"server/tests/**/*.test.js\" --compilers js:babel-register --require babel-polyfill

摩卡\“服务器/测试/ * * / * test。编译器js:babel-register——需要babel-polyfill。

#7

I started getting this error after converting my project into a typescript project. From what I understand, the problem stems from async/await not being recognized.

在将我的项目转换为打字稿项目之后，我开始出现这个错误。根据我的理解，问题源于异步/等待不被识别。

For me the error was fixed by adding two things to my setup:

对我来说，错误是通过在我的设置中添加两件东西来修复的:

1. As mentioned above many times, I needed to add babel-polyfill into my webpack entry array:

   如前所述，我需要在webpack入口数组中添加babel-polyfill:

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

2. I needed to update my .babelrc to allow the complilation of async/await into generators:

   我需要更新我的。babelrc，以允许异步/等待变成生成器:

   {
     "presets": ["es2015"],
     "plugins": ["transform-async-to-generator"]
   }

DevDependencies:

I had to install a few things into my devDependencies in my package.json file as well. Namely, I was missing the babel-plugin-transform-async-to-generator, babel-polyfill and the babel-preset-es2015:

我必须在包的devDependencies中安装一些东西。json文件。也就是说，我错过了babel-plugin- transform-asyncto -generator, babel-polyfill和babel-preset-es2015:

 "devDependencies": {
    "babel-loader": "^6.2.2",
    "babel-plugin-transform-async-to-generator": "^6.5.0",
    "babel-polyfill": "^6.5.0",
    "babel-preset-es2015": "^6.5.0",
    "webpack": "^1.12.13"
 }

Full Code Gist:

I got the code from a really helpful and concise GitHub gist you can find here.

我从一个非常有用和简洁的GitHub要点中获得了代码，你可以在这里找到。

#8

You're getting an error because async/await use generators, which are an ES2016 feature, not ES2015. One way to fix this is to install the babel preset for ES2016 (npm install --save babel-preset-es2016) and compile to ES2016 instead of ES2015:

您会得到一个错误，因为异步/等待使用生成器，这是ES2016特性，而不是ES2015。解决这个问题的一种方法是为ES2016安装babel预置(npm安装——保存babel预置——ES2016)，并将其编译为ES2016而不是ES2015:

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

As the other answers mention, you can also use polyfills (though make sure you load the polyfill first before any other code runs). Alternatively, if you don't want to include all of the polyfill dependencies, you can use the babel-regenerator-runtime or the babel-plugin-transform-runtime.

正如其他答案所提到的，您还可以使用polyfill(不过要确保在运行任何其他代码之前先加载polyfill)。或者，如果您不想包含所有的polyfill依赖项，您可以使用babel-regenerator-runtime或babel-plugin-transform-runtime。

#9

New Answer Why you follow my answer ?

你为什么要听我的回答?

Ans: Because I am going to give you a answer with latest Update version npm project .

答:因为我将用最新的更新版本npm项目给你一个答案。

04/14/2017

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"

If your Use this version or more UP version of Npm and all other ... SO just need to change :

如果你使用这个版本或更多版本的Npm和其他所有…所以只需要改变

webpack.config.js

webpack.config.js

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

After change webpack.config.js files Just add this line to top of your code .

webpack.config后改变。js文件只需将这一行添加到代码的顶部。

import "babel-polyfill";

Now check everything is ok. Reference LINK

现在检查一下是否一切正常。参考链接

Also Thanks @BrunoLM for his nice Answer.

也要感谢@BrunoLM的精彩回答。

#10

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 defined error.

我在同一个文件中有“polyfill导入”和“async函数”，但是我使用的函数语法将它悬置在polyfill之上，这样就会产生ReferenceError: regeneratorRuntime没有定义错误。

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.

防止它被吊在多填料进口上方。

#11

1 - Install babel-plugin-transform-async-to-module-method, babel-polyfil, bluebird , babel-preset-es2015, babel-core :

1 -安装babel-plugin- transform-asyncto -module方法、babel-polyfil、bluebird、babel-preset-es2015、babel-core:

npm install babel-plugin-transform-async-to-module-method babel-polyfill bluebird babel-preset-es2015 babel-core

2 - Add in your js babel polyfill:

2 -加入你的js babel polyfill:

import 'babel-polyfill';

进口“babel-polyfill”;

3 - Add plugin in your .babelrc:

3 -在你的。babelrc中添加插件:

{
    "presets": ["es2015"],
    "plugins": [
      ["transform-async-to-module-method", {
        "module": "bluebird",
        "method": "coroutine"
      }]
    ]
}

Source : http://babeljs.io/docs/plugins/transform-async-to-module-method/

来源:http://babeljs.io/docs/plugins/transform-async-to-module-method/

#12

I fixed this error by installing babel-polyfill

我安装了babel-polyfill，修正了这个错误。

npm install babel-polyfill --save

then I imported it my app entry point

然后导入app入口点。

import http from 'http';
import config from 'dotenv';
import 'babel-polyfill';
import { register } from 'babel-core';
import app from '../app';

for testing I included --require babel-polyfill in my test script

为了测试我的测试脚本，需要使用babel-polyfill。

"test": "export NODE_ENV=test|| SET NODE_ENV=test&& mocha --compilers 
  js:babel-core/register --require babel-polyfill server/test/**.js --exit"

#13

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

babel-regenerator-runtime现在已被废弃，取而代之的是应该使用regenerator-runtime。

To use the runtime generator with webpack and babel v7:

使用webpack和babel v7的运行时生成器:

install regenerator-runtime:

安装regenerator-runtime:

npm i -D regenerator-runtime

And then add within webpack configuration :

然后在webpack配置中添加:

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

#14

I had a setup
with webpack using presets: ['es2015', 'stage-0']
and mocha that was running tests compiled by webpack.

我在webpack上设置了一个设置:['es2015'， 'stage-0']和mocha，这是由webpack编译的测试。

To make my async/await in tests work all I had to do is add mocha --require babel-polyfill option.

为了使异步/等待测试工作，我所要做的就是添加mocha——需要babel-polyfill选项。

#15

I get this error using gulp with rollup when I tried to use ES6 generators:

当我尝试使用ES6生成器时，我使用gulp和rollup会得到这个错误:

gulp.task('scripts', () => {
  return rollup({
    entry: './app/scripts/main.js',
    format: "iife",
    sourceMap: true,
    plugins: [babel({
      exclude: 'node_modules/**',
      "presets": [
        [
          "es2015-rollup"
        ]
      ],
      "plugins": [
        "external-helpers"
      ]
    }),
    includePaths({
      include: {},
      paths: ['./app/scripts'],
      external: [],
      extensions: ['.js']
    })]
  })

  .pipe(source('app.js'))
  .pipe(buffer())
  .pipe(sourcemaps.init({
    loadMaps: true
  }))
  .pipe(sourcemaps.write('.'))
  .pipe(gulp.dest('.tmp/scripts'))
  .pipe(reload({ stream: true }));
});

I may case the solution was to include babel-polyfill as bower component:

我可能认为解决方案是将babel-polyfill作为bower组件:

bower install babel-polyfill --save

and add it as dependency in index.html:

在index.html中添加依赖项:

<script src="/bower_components/babel-polyfill/browser-polyfill.js"></script>

#16

If you using Gulp + Babel for a frontend you need to use babel-polyfill

如果你在前端使用Gulp + Babel，你需要使用Babel -polyfill

npm install babel-polyfill

npm安装babel-polyfill

and then add a script tag to index.html above all other script tags and reference babel-polyfill from node_modules

然后在索引中添加一个脚本标签。html高于所有其他脚本标记和引用node_modules中的babel-polyfill

#17

Most of these answers recommend solutions for dealing with this error using WebPack. But in case anyone is using RollUp (like I am), here is what finally worked for me (just a heads-up and bundling this polyfill ads about 10k tot he output size):

这些答案中的大多数都推荐使用WebPack处理这个错误的解决方案。但是，如果有人正在使用RollUp(就像我一样)，以下就是最终对我有用的东西(只需要提高警惕，把这个polyfill广告打包成10k的大小):

.babelrc

.babelrc

{
    "presets": [
        [
            "env",
            {
                "modules": false,
                "targets": {
                    "browsers": ["last 2 versions"]
                }
            }
        ]
    ],
    "plugins": ["external-helpers",
        [
            "transform-runtime",
            {
                "polyfill": false,
                "regenerator": true
            }
        ]]
}

rollup.config.js

rollup.config.js

import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
import uglify from 'rollup-plugin-uglify';
import commonjs from 'rollup-plugin-commonjs';


export default {
    input: 'src/entry.js',
    output: {
        file: 'dist/bundle.js',
        format: 'umd',
        name: 'MyCoolLib',
        exports: 'named'
    },
    sourcemap: true,
    plugins: [
        commonjs({
            // polyfill async/await
            'node_modules/babel-runtime/helpers/asyncToGenerator.js': ['default']
        }),
        resolve(),
        babel({
            runtimeHelpers: true,
            exclude: 'node_modules/**', // only transpile our source code
        }),
        uglify()

    ]
};

#18

For people looking to use the babel-polyfill version 7^ do this with webpack ver3^.

为那些想使用babel-polyfill version 7 ^做webpack ver3 ^。

Npm install the module npm i -D @babel/polyfill

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

Then in your webpack file in your entry point do this

然后在你的webpack文件的入口点做这个

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

#19

I have async await working with webpack/babel build:

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

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

.babelrc:

.babelrc:

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