Babel 6 regeneratorRuntime 未定义

babel-polyfill（Babel 7.4 中的 deprecated）是必需的。您还必须安装它才能使 async/await 正常工作。

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

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

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

"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

---

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

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

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

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

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

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

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

---

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

那么您的应用程序应该可以在 Chrome 浏览器的最后 2 个版本中运行。

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

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

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

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

---

更新：Babel 7 post 也有更深入的答案。

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

从 Babel 7.4.0，@babel/polyfill is deprecated。

一般来说，安装 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 .    
    },
  }]
]

将根据您的 target 自动使用 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

如果使用 corejs polyfill，请将 @babel/runtime 替换为 @babel/runtime-corejs2（用于 "corejs": 2）或 @babel/runtime-corejs3（用于 "corejs": 3）。

---

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

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

  // ...
};

当使用带有 HMR 的 webpack-dev-server 时，这样做可以大大减少每次构建时必须编译的文件数量。该模块是作为 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"
  ]
}

---

当 async/await 函数在没有适当的 Babel 插件的情况下使用时会导致此错误。自 2020 年 3 月起，您只需要做以下事情。 （@babel/polyfill 并且许多公认的解决方案在 Babel 中已被弃用。在 Babel docs. 中了解更多信息）

在命令行中，键入：

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'],
};

---

babel-regenerator-runtime 现在是 deprecated，而应该使用 regenerator-runtime。

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

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

---

截至 2019 年 10 月，这对我有用：

将此添加到预设中。

 "presets": [
      "@babel/preset-env"
    ]

然后使用 npm 安装 regenerator-runtime。

npm i regenerator-runtime

然后在您的主文件中使用：（此导入仅使用一次）

import "regenerator-runtime/runtime";

这将使您能够在文件中使用 async awaits 并删除 regenerator error

---

小心提升的功能

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

更改此代码

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

对此

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

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

---

如果使用 babel-preset-stage-2，则只需使用 --require babel-polyfill 启动脚本。

在我的情况下，此错误是由 Mocha 测试引发的。

以下修复了问题

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

---

我使用了来自 https://github.com/babel/babel/issues/9849#issuecomment-592668815 的提示并将 targets: { esmodules: true,} 添加到我的 babel.config.js。

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          esmodules: true,
        },
      },
    ],
  ],
}

---

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

npm install --save-dev regenerator-runtime

然后在我的代码中：

import 'regenerator-runtime/runtime';

很高兴避免来自 babel-polyfill 的额外 200 kB。

---

您收到错误是因为 async/await 使用生成器，这是 ES2016 功能，而不是 ES2015。解决此问题的一种方法是为 ES2016 (npm install --save babel-preset-es2016) 安装 babel 预设并编译为 ES2016 而不是 ES2015：

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

正如其他答案所提到的，您也可以使用 polyfills（但请确保在运行任何其他代码之前先使用 load the polyfill first）。或者，如果您不想包含所有 polyfill 依赖项，则可以使用 babel-regenerator-runtime 或 babel-plugin-transform-runtime。

---

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

对我来说，通过在我的设置中添加两件事来修复错误：

正如上面多次提到的，我需要将 babel-polyfill 添加到我的 webpack 入口数组中： ... entry: ['babel-polyfill', './index.js'], ... 我需要更新我的 .babelrc允许将 async/await 编译到生成器中：{ "presets": ["es2015"], "plugins": ["transform-async-to-generator"] }

开发依赖：

我还必须在 package.json 文件中的 devDependencies 中安装一些东西。也就是说，我错过了 babel-plugin-transform-async-to-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 gist 中获得了代码，您可以找到 here。

---

我通过安装 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"

---

上面的答案太多了，我把我的答案贴出来供我参考。我使用 webpack 并做出反应，这是我没有 .babelrc 文件的解决方案

我正在 2020 年 8 月进行这项工作

安装 react 和 babel

npm i @babel/core babel-loader @babel/preset-env @babel/preset-react react react-dom @babel/plugin-transform-runtime --save-dev

然后在我的 webpack.config.js

// other stuff
module.exports = {
// other stuff

   module: {
   rules: [
  
   {
    test: /\.m?js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env',"@babel/preset-react"],
        plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-transform-runtime'],
        //npm install --save-dev @babel/plugin-transform-runtime
          }
        }
      },
    ],
  },

};

我只是不知道为什么我暂时不需要安装异步包

---

新答案 为什么你听我的回答？

Ans: 因为我要用最新的更新版本 npm project 给你一个答案。

2017 年 4 月 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"

如果您使用此版本或更多 UP 版本的 Npm 和所有其他...所以只需要更改：

webpack.config.js

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

更改 webpack.config.js 文件后，只需将此行添加到您的代码顶部。

import "babel-polyfill";

现在检查一切正常。 Reference LINK

还要感谢@BrunoLM 的好回答。

---

我需要支持的目标浏览器已经支持 async/await，但是在编写 mocha 测试时，如果没有正确设置，我仍然会收到此错误。

我用谷歌搜索的大多数文章都已过时，包括此处接受的答案和高票数的答案，即您不需要polyfill、babel-regenerator-runtime、babel-plugin-transform-runtime。等等 如果你的目标浏览器已经支持 async/await （当然如果不是你需要 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
      }]
    ]
  }

---

我的工作 babel 7 样板与再生器运行时反应：

.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": true,
        },
      },
    ],
    "@babel/preset-react",
  ],
  "plugins": [
    "@babel/plugin-syntax-class-properties",
    "@babel/plugin-proposal-class-properties"
  ]
}

包.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";

....

---

在控制台中修复此“regeneratorRuntime 未定义问题”的最简单方法：

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

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

在 index.html 的正文中。现在 regeneratorRuntime 应该在你运行 babel 后定义，现在你的 async/await 函数应该成功编译到 ES2015 中

---

当我尝试使用 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 组件：

bower install babel-polyfill --save

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

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

---

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/

---

对于希望使用 babel-polyfill 版本 7^ 的人，请使用 webpack ver3^。

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

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

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

---

对于 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

---

我使用 presets: ['es2015', 'stage-0']
和 mocha 对 webpack 进行了设置
，它正在运行由 webpack 编译的测试。

为了使我的 async/await 在测试中工作，我所要做的就是使用带有 --require babel-polyfill 选项的 mocha：

mocha --require babel-polyfill

---

只需使用以下命令安装 regenerator-runtime

npm i regenerator-runtime

在需要服务器文件之前在启动文件中添加以下行

require("regenerator-runtime/runtime");

到目前为止，这一直对我有用

---

我正在使用 React 和 Django 项目，并通过使用 regenerator-runtime 使其工作。您应该这样做，因为 @babel/polyfill 会进一步增加您的应用程序的大小，而且也是 deprecated。我还关注了 this tutorial's 第 1 集和2 创建我的项目的 structure。

*package.json*

...
"devDependencies": {
    "regenerator-runtime": "^0.13.3",
    ...
}

.babelrc

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

index.js

...
import regeneratorRuntime from "regenerator-runtime";
import "regenerator-runtime/runtime";
ReactDOM.render(<App />, document.getElementById('app'));
...

---