我正在尝试使用异步，在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;

正常使用它而不需要异步/等待就可以了。有什么想法我做错了吗？

babel-polyfill（自Babel 7.4起已弃用）。您还必须安装它才能使异步/等待工作。

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

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

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

带有async / await的.js（示例代码）

"use strict";

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

function bar() {
  return "bar";
}

在启动文件中

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

如果您使用的是webpack，则需要将其作为entry数组的第一个值放在webpack配置文件中（通常为webpack.config.js），按照@Cemen注释：

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

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

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

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

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

除了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"]
    ]
}

更新资料

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

因此，此答案对于原始问题并不完全正确。我将在这里保留它作为对的参考babel-preset-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"]
      }
    }]
  ]
}

那么您的应用应该可以在最近2个版本的Chrome浏览器中使用。

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

告诉我什么，不要告诉我如何。

我非常喜欢babel-preset-env的理念：告诉我您要支持哪种环境，不要告诉我如何支持它们。这就是声明式编程的美。

我已经测试过async await，他们确实可以工作。我不知道他们的工作方式，我真的不想知道。我想把时间花在自己的代码和业务逻辑上。多亏了babel-preset-env，它使我从Babel配置地狱中解放了出来。

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

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

  // ...
};

当将Webpack-dev-server与HMR一起使用时，这样做可以减少必须在每个版本上编译的文件数量。此模块是作为其一部分安装的，babel-polyfill因此，如果您还可以，则可以单独使用进行安装npm i -D babel-regenerator-runtime。

我的简单解决方案：

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"
  ]
}

Babel 7.4.0或更高版本（core-js 2/3）

从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代替，请参见此处。

干杯

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

要将运行时生成器与webpack和babelv7一起使用：

安装regenerator-runtime：

npm i -D regenerator-runtime

然后在webpack配置中添加：

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

.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"
        }
      }
    ]
  ]
}

注意提升功能

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

更改此代码

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

对此

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

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

截至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

将项目转换为打字稿项目后，我开始收到此错误。据我了解，问题源于异步/等待未被识别。

对我来说，错误是通过在安装程序中添加两件事来解决的：

1. 如上文所述，我需要将babel-polyfill添加到我的webpack条目数组中：

   ...
   
   条目：['babel-polyfill'，'./index.js']，
   
   ...

2. 我需要更新我的.babelrc以允许将异步/等待合并到生成器中：

   {
     “预设”：[“ es2015”]，
     “插件”：[“将发电机转换为发电机”]
   }

DevDependencies：

我还必须在package.json文件中的devDependencies中安装一些东西。即，我缺少babel-plugin-transform-async-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"
 }

完整代码要点：

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

我在Chrome中遇到了这个问题。类似于RienNeVaPlu的回答，这为我解决了问题：

npm install --save-dev regenerator-runtime

然后在我的代码中：

import 'regenerator-runtime/runtime';

很高兴避免从那里多出200 kB babel-polyfill。

您收到错误消息是因为异步/等待使用生成器，这是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。

我通过安装babel-polyfill修复了此错误

npm install babel-polyfill --save

然后将其导入我的应用程序入口点

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

为了进行测试，我在测试脚本中包括了--require babel-polyfill

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

如果在async/await没有适当的Babel插件的情况下使用函数，则会导致此错误。截至2020年3月，您需要做的只是以下工作。（@babel/polyfillBabel已弃用了许多公认的解决方案。Babel文档中有更多信息。）

在命令行中，输入：

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

在您的babel.config.js文件中，添加此插件@babel/plugin-transform-runtime。注意：以下示例包括我最近从事的一个小型React / Node / Express项目所具有的其他预设和插件：

module.exports = {
  presets: ['@babel/preset-react', '@babel/preset-env'],
  plugins: ['@babel/plugin-proposal-class-properties', 
  '@babel/plugin-transform-runtime'],
};

新答案为什么您遵循我的答案？

回答：因为我将为您提供最新的更新版本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的回答。

我需要支持的目标浏览器已经支持异步/等待，但是在编写摩卡测试时，如果没有适当的设置，我仍然会遇到此错误。

最让我用Google搜索的文章是过时的，包括接受的答案，高投的答案在这里，即你不需要polyfill，babel-regenerator-runtime，babel-plugin-transform-runtime。等等。如果您的目标浏览器已经支持异步/等待（当然，如果您不需要polyfill）

我都不想用webpack。

泰勒·朗（Tyler Long）自从他提出建议以来，答案实际上是在正确的轨道上babel-preset-env（但是我首先省略了答案，因为他一开始就提到polifill）。ReferenceError: regeneratorRuntime is not defined刚开始我还是得到了，然后才意识到这是因为我没有设定目标。为节点设置目标后，我修复了regeneratorRuntime错误：

  "scripts": {
    //"test": "mocha --compilers js:babel-core/register"
    //https://github.com/mochajs/mocha/wiki/compilers-deprecation
    "test": "mocha --require babel-core/register"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "mocha": "^5.2.0"
  },
  //better to set it .bablerc, I list it here for brevity and it works too.
  "babel": {
    "presets": [
      ["env",{
        "targets": {
          "node": "current"
           "chrome": 66,
           "firefox": 60,
        },
        "debug":true
      }]
    ]
  }

要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
    }]
  ]
}

取自https://github.com/parcel-bundler/parcel/issues/1762

1-安装babel-plugin-transform-async-to-module-method，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-在您的js babel polyfill中添加：

import 'babel-polyfill';

3-在.babelrc中添加插件：

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

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

我使用 和摩卡安装
了webpackpresets: ['es2015', 'stage-0']
正运行通过的WebPack编译测试。

为了使我async/await的测试工作正常，我要做的就是添加mocha --require babel-polyfill选项。

当我尝试使用ES6生成器时，将gulp与汇总一起使用时出现此错误：

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 }));
});

我可能认为解决方案包括babel-polyfill作为凉亭组件：

bower install babel-polyfill --save

并将其添加为index.html中的依赖项：

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

对于希望使用babel-polyfill版本7 ^的用户，请使用webpackver3 ^。

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

然后在您的webpack文件中entry执行此操作

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

我的工作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";

....

如果要构建应用程序，则只需要@babel/preset-envand @babel/polyfill：

npm i -D @babel/preset-env
npm i @babel/polyfill

（注意：您不需要安装core-js和regenerator-runtime软件包，因为它们都将由@ babel / polyfill安装）

然后在.babelrc：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry"  // this is the key. use 'usage' for further codesize reduction, but it's still 'experimental'
      }
    ]
  ]
}

现在设置目标环境。在这里，我们在.browserslistrc文件中执行此操作：

# Browsers that we support

>0.2%
not dead
not ie <= 11
not op_mini all

最后，如果您使用useBuiltIns: "entry"，请放在import @babel/polyfill条目文件的顶部。否则，您就完成了。

仅当您的任何目标环境/浏览器需要它们时，使用此方法才会有选择地导入那些polyfill和“ regenerator-runtime”文件（regeneratorRuntime is not defined在此处修复您的问题）。

备查：

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

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

异步等待仍可以被

https://babeljs.io/docs/zh/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 polyfill https://babeljs.io/docs/en/babel-polyfill

安装

npm install --save @babel/polyfill

webpack.config.js

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

在2019年与Babel 7.4.0+，babel-polyfill包已经有利于包括直接弃用core-js/stable（core-js@3+以填充工具的ECMAScript设有）和regenerator-runtime/runtime（使用transpiled发电机功能所需）：

import "core-js/stable";
import "regenerator-runtime/runtime";

来自babel-polyfill 文档的信息。

解决控制台中“ regeneratorRuntime未定义问题”的最简单方法：

您无需安装任何不必要的插件。只需添加：

<script src="https://unpkg.com/regenerator-runtime@0.13.1/runtime.js"></script>

在index.html的正文中。现在，一旦运行babel，就应该定义regeneratorRuntime，并且应该将async / await函数成功编译到ES2015中

如果您使用Gulp + Babel作为前端，则需要使用babel-polyfill

npm install babel-polyfill

然后在所有其他脚本标签上方将脚本标签添加到index.html，并从node_modules引用babel-polyfill