未定义 Babel 6 regeneratorRuntime
Babel 6 regeneratorRuntime is not defined
我正在尝试在 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-polyfill（从 Babel 7.4 开始，deprecated）是必需的。您还必须安装它才能使 async/await 正常工作。
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" ]
}
.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-polyfill 提供的所有模块，您可以在 webpack 配置中指定 babel-regenerator-runtime：
module.exports = {
entry: ['babel-regenerator-runtime', './test.js'],
// ...
};
在将 webpack-dev-server 与 HMR 结合使用时，这样做可以大大减少每次构建时必须编译的文件数量。这个模块是作为 babel-polyfill 的一部分安装的，所以如果你已经有了它就没问题，否则你可以使用 npm i -D babel-regenerator-runtime.
单独安装它
Note
If you're using babel 7, the package has been renamed to @babel/plugin-transform-runtime.
除了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.
它还支持 async/await 以及 ES 6 的其他内置插件。
$ npm install --save-dev babel-plugin-transform-runtime
在.babelrc中添加运行时插件
{
"plugins": [
["transform-runtime", {
"regenerator": true
}]
]
}
我有 async await 使用 webpack/babel build:
"devDependencies": {
"babel-preset-stage-3": "^6.11.0"
}
.babelrc:
"presets": ["es2015", "stage-3"]
如果使用 babel-preset-stage-2 则只需使用 --require babel-polyfill 启动脚本。
在我的例子中，这个错误是由 Mocha 测试引发的。
以下问题已解决
mocha \"server/tests/**/*.test.js\" --compilers js:babel-register --require babel-polyfill
我有一个设置
使用 webpack 使用 presets: ['es2015', 'stage-0']
mocha 是 运行 由 webpack 编译的测试。
为了使我的 async/await 在测试中正常工作，我所要做的就是将 mocha 与 --require babel-polyfill 选项一起使用：
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 组件包含在内：
bower install babel-polyfill --save
并将其添加为 index.html 中的依赖项：
<script src="/bower_components/babel-polyfill/browser-polyfill.js"></script>
更新
如果您将目标设置为 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 配置的地狱中解放出来。
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/
您收到错误消息是因为 async/await 使用了生成器，这是 ES2016 的一项功能，而不是 ES2015。解决此问题的一种方法是为 ES2016 安装 babel 预设 (npm install --save babel-preset-es2016) 并编译为 ES2016 而不是 ES2015:
"presets": [
"es2016",
// etc...
]
如其他答案所述，您也可以使用 (though make sure you before any other code runs). Alternatively, if you don't want to include all of the polyfill dependencies, you can use the or the 。
新答案 为什么你关注我的答案？
Ans: 因为我要用最新的更新版本 npm 项目给你一个答案。
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";
现在检查一切正常。 Reference LINK
也感谢@BrunoLM 的精彩回答。
我的简单解决方案：
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-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"
如果你使用 Gulp + Babel 作为前端，你需要使用 babel-polyfill
npm install babel-polyfill
然后将脚本标签添加到 index.html 所有其他脚本标签之上，并从 node_modules
引用 babel-polyfill
这些答案中的大多数都推荐使用 WebPack 处理此错误的解决方案。但是万一有人在使用 RollUp（就像我一样），这就是最终对我有用的方法（只是提醒一下，捆绑这个 polyfill 广告大约 10k tot 他输出大小）：
.babelrc
{
"presets": [
[
"env",
{
"modules": false,
"targets": {
"browsers": ["last 2 versions"]
}
}
]
],
"plugins": ["external-helpers",
[
"transform-runtime",
{
"polyfill": false,
"regenerator": true
}
]]
}
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()
]
};
babel-regenerator-runtime 现在是 deprecated，应该使用 regenerator-runtime.
将运行时生成器与 webpack 和 babel v7 一起使用：
安装regenerator-runtime：
npm i -D regenerator-runtime
然后在 webpack 配置中添加：
entry: [
'regenerator-runtime/runtime',
YOUR_APP_ENTRY
]
对于希望使用 babel-polyfill 版本 7^ 的人，请使用 webpack ver3^。
npm 安装模块 npm i -D @babel/polyfill
然后在 webpack 文件中 entry 点执行此操作
entry: ['@babel/polyfill', path.resolve(APP_DIR, 'App.js')],
我在将我的项目转换为打字稿项目后开始收到此错误。据我了解，问题源于 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 要点中获得了代码，您可以找到 here。
小心提升函数
我的 '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.buildExternalHelpers() 和 babel-plugin-external-helpsers 创建自定义 babelHelpers.js 文件的情况下，我认为对客户而言成本最低的解决方案是将 regenerator-runtime/runtime.js 添加到输出而不是所有的 polyfill。
// runtime.js
npm install --save regenerator-runtime
// building the custom babelHelper.js
fs.writeFile(
'./babelHelpers.js',
fs.readFileSync('node_modules/regenerator-runtime/runtime.js')
+ '\n'
+ require('babel-core').buildExternalHelpers()
)
当包含 babel-polyfill.
时，此解决方案减少到大约 20 KB 而不是 ~230 KB
我需要支持的目标浏览器已经支持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
}]
]
}
我在 Chrome 遇到过这个问题。类似于 RienNeVaPlu͢s 的回答，这为我解决了：
npm install --save-dev regenerator-runtime
然后在我的代码中：
import 'regenerator-runtime/runtime';
很高兴避免来自 babel-polyfill 的额外 200 kB。
我有 regeneratorRuntime is not defined 错误
当我在我的反应应用程序中使用 'async' 和 'await'
'async' 和 'await' 是 ES7 中的新关键字
为此你应该使用 babel-preset-es2017
安装这个 devDependencies:
`
"babel-preset-es2017": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1", `
并使用这个
"presets": [ "es2017" , "stage-0" , "react" ]
给 babel 7 用户和 Parcel JS >= 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
}]
]
}
根据以下示例更新您的 .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"
}
}
]
]
}
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"]
]
}
如果您要构建应用程序，则只需要 @babel/preset-env 和 @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 问题）仅 如果它们被任何人需要你的目标 environments/browsers.
我在尝试 运行 Mocha + Babel 时遇到了这个问题。我有一个在开发中工作的 .babelrc（请参阅此处的其他答案，它们非常完整），但我的 npm run test 命令仍在抱怨 regeneratorRuntime is not defined。所以我修改了我的 package.json:
"scripts": {
"test": "mocha --require babel-polyfill --require babel-core/register tests/*.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";
....
更新：也有更in-depth的回答。
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 is used, you replace @babel/runtime with @babel/runtime-corejs2 (for "corejs": 2) or @babel/runtime-corejs3 (for "corejs": 3).
我正在使用 React 和 Django 项目，并通过使用 regenerator-runtime 让它工作。您应该这样做，因为 @babel/polyfill 会更多地增加您的应用程序的大小，并且也是 deprecated. I also followed this tutorial's episode 1 & 2 to create my project's 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'));
...
此解决方案已过时。
我在该视频的 YouTube 评论中找到了解决方案
https://www.youtube.com/watch?v=iWUR04B42Hc&lc=Ugyq8UJq-OyOzsKIIrB4AaABAg
这应该指向正确的评论。 "beth w" 找到解决方案的很多支持。
Beth W 3 months ago (edited)
Another change I had to make in 2019 - babel no longer uses the stage-0 preset as of v7 apparently, so at 26:15 instead of 'npm install --save-dev babel-polyfill babel-preset-stage-0', I had to do:
npm install --save @babel/polyfill
Which covers both of the older options. Then, in the entry point for the app I > included '@babel/polyfill', and in the query presets I left it as-is. So the webpack config ends up looking like:
const path = require('path');
module.exports = {
entry: {
app: ['@babel/polyfill', './src/app.js']
},
output: {
path: path.resolve(__dirname, 'build'),
filename: 'app.bundle.js'
},
mode: 'development',
module: {
rules: [{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['@babel/preset-env']
}
}]
}
}
Hope that helps someone!
截至 2019 年 10 月，这对我有用：
将此添加到预设中。
"presets": [
"@babel/preset-env"
]
然后使用 npm 安装 regenerator-runtime。
npm i regenerator-runtime
然后在您的主文件中使用：（此导入仅使用一次）
import "regenerator-runtime/runtime";
这将使您能够在文件中使用 async awaits 并删除 regenerator error
供日后参考 :
从 Babel 版本 7.0.0-beta.55 开始，阶段预设已被删除
参考博客https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets
async await 仍然可以被
使用
https://babeljs.io/docs/en/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（需要使用转译的生成器函数）：
import "core-js/stable";
import "regenerator-runtime/runtime";
信息来自 babel-polyfill documentation.
在您的控制台中解决此问题的最简单方法'regeneratorRuntime not defined issue'：
您不必安装任何不必要的插件。只需添加：
<script src="https://unpkg.com/regenerator-runtime@0.13.1/runtime.js"></script>
在你的体内 index.html。
现在 regeneratorRuntime 应该在你 运行 babel 定义后现在你的 async/await 函数应该成功编译到 ES2015
在 React 预设之前使用 stage-2 预设对我有帮助：
npx babel --watch src --out-dir . --presets stage-2,react
以上代码在安装以下模块时有效：
npm install babel-cli babel-core babel-preset-react babel-preset-stage-2 --save-dev
这个错误是在没有正确的 Babel 插件的情况下使用 async/await 函数引起的。截至 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'],
};
上面的回答太多了，我post我的回答供大家参考。
我使用 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
}
}
},
],
},
};
只是不知道为什么暂时不需要安装async包
只需安装：
npm install --save-dev @babel/plugin-transform-runtime
并将其添加到 Babel 的插件数组中。
只需安装 regenerator-runtime
使用以下命令
npm i regenerator-runtime
在需要服务器文件之前在启动文件中添加以下行
require("regenerator-runtime/runtime");
到目前为止这对我有用
或者，如果您没有使用像 webpack 或 rollup 这样的捆绑器，您可以作为一种解决方法，只需在 index.html.[=] 中使用普通的旧脚本标签导入 https://raw.githubusercontent.com/facebook/regenerator/master/packages/regenerator-runtime/runtime.js 的内容。 11=]
不是最优的，但在我的情况下是唯一的解决方案。
- 安装
@babel-polyfill 并将其保存在您的开发依赖项中
npm install --save-dev @babel/polyfill
- 复制并粘贴
require("@babel/polyfill");到您的条目文件的顶部
Entry.js
require("@babel/polyfill"); // this should be include at the top
在条目数组中添加@babel/polyfill
您的预设数组中需要预设环境
webpack.config.js
const path = require('path');
require("@babel/polyfill"); // necesarry
module.exports = {
entry: ['@babel/polyfill','./src/js/index.js'],
output: {
path: path.resolve(__dirname, 'to_be_deployed/js'),
filename: 'main.js'
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
mode: 'development'
}
安装babel-polyfill
npm install --save @babel/polyfill
更新webpack文件
entry: ["@babel/polyfill", "<your enter js file>"]
如果您使用的是下一个 js，请将 import regeneratorRuntime from "regenerator-runtime"; 添加到引发错误的文件中，对我来说，该文件是 _document.js.
并添加
[
"@babel/plugin-transform-regenerator",
{
"asyncGenerators": false,
"generators": false,
"async": false
}
]
在 plugins 中，在 .babelrc 文件中。
我使用了 https://github.com/babel/babel/issues/9849#issuecomment-592668815 的技巧并将 targets: { esmodules: true,} 添加到我的 babel.config.js。
module.exports = {
presets: [
[
'@babel/preset-env',
{
targets: {
esmodules: true,
},
},
],
],
}
进口'babel-polyfill'
你在哪里使用异步等待
尝试将此添加到您的 package.json
"browserslist": [
"last 2 Chrome versions"
]
对我有用！
我正在尝试在 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-polyfill（从 Babel 7.4 开始，deprecated）是必需的。您还必须安装它才能使 async/await 正常工作。
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" ]
}
.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-polyfill 提供的所有模块，您可以在 webpack 配置中指定 babel-regenerator-runtime：
module.exports = {
entry: ['babel-regenerator-runtime', './test.js'],
// ...
};
在将 webpack-dev-server 与 HMR 结合使用时，这样做可以大大减少每次构建时必须编译的文件数量。这个模块是作为 babel-polyfill 的一部分安装的，所以如果你已经有了它就没问题，否则你可以使用 npm i -D babel-regenerator-runtime.
Note If you're using babel 7, the package has been renamed to @babel/plugin-transform-runtime.
除了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.
它还支持 async/await 以及 ES 6 的其他内置插件。
$ npm install --save-dev babel-plugin-transform-runtime
在.babelrc中添加运行时插件
{
"plugins": [
["transform-runtime", {
"regenerator": true
}]
]
}
我有 async await 使用 webpack/babel build:
"devDependencies": {
"babel-preset-stage-3": "^6.11.0"
}
.babelrc:
"presets": ["es2015", "stage-3"]
如果使用 babel-preset-stage-2 则只需使用 --require babel-polyfill 启动脚本。
在我的例子中，这个错误是由 Mocha 测试引发的。
以下问题已解决
mocha \"server/tests/**/*.test.js\" --compilers js:babel-register --require babel-polyfill
我有一个设置
使用 webpack 使用 presets: ['es2015', 'stage-0']
mocha 是 运行 由 webpack 编译的测试。
为了使我的 async/await 在测试中正常工作，我所要做的就是将 mocha 与 --require babel-polyfill 选项一起使用：
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 组件包含在内：
bower install babel-polyfill --save
并将其添加为 index.html 中的依赖项：
<script src="/bower_components/babel-polyfill/browser-polyfill.js"></script>
更新
如果您将目标设置为 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 配置的地狱中解放出来。
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/
您收到错误消息是因为 async/await 使用了生成器，这是 ES2016 的一项功能，而不是 ES2015。解决此问题的一种方法是为 ES2016 安装 babel 预设 (npm install --save babel-preset-es2016) 并编译为 ES2016 而不是 ES2015:
"presets": [
"es2016",
// etc...
]
如其他答案所述，您也可以使用
新答案 为什么你关注我的答案？
Ans: 因为我要用最新的更新版本 npm 项目给你一个答案。
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";
现在检查一切正常。 Reference LINK
也感谢@BrunoLM 的精彩回答。
我的简单解决方案：
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-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"
如果你使用 Gulp + Babel 作为前端，你需要使用 babel-polyfill
npm install babel-polyfill
然后将脚本标签添加到 index.html 所有其他脚本标签之上，并从 node_modules
引用 babel-polyfill这些答案中的大多数都推荐使用 WebPack 处理此错误的解决方案。但是万一有人在使用 RollUp（就像我一样），这就是最终对我有用的方法（只是提醒一下，捆绑这个 polyfill 广告大约 10k tot 他输出大小）：
.babelrc
{
"presets": [
[
"env",
{
"modules": false,
"targets": {
"browsers": ["last 2 versions"]
}
}
]
],
"plugins": ["external-helpers",
[
"transform-runtime",
{
"polyfill": false,
"regenerator": true
}
]]
}
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()
]
};
babel-regenerator-runtime 现在是 deprecated，应该使用 regenerator-runtime.
将运行时生成器与 webpack 和 babel v7 一起使用：
安装regenerator-runtime：
npm i -D regenerator-runtime
然后在 webpack 配置中添加：
entry: [
'regenerator-runtime/runtime',
YOUR_APP_ENTRY
]
对于希望使用 babel-polyfill 版本 7^ 的人，请使用 webpack ver3^。
npm 安装模块 npm i -D @babel/polyfill
然后在 webpack 文件中 entry 点执行此操作
entry: ['@babel/polyfill', path.resolve(APP_DIR, 'App.js')],
我在将我的项目转换为打字稿项目后开始收到此错误。据我了解，问题源于 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 要点中获得了代码，您可以找到 here。
小心提升函数
我的 '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.buildExternalHelpers() 和 babel-plugin-external-helpsers 创建自定义 babelHelpers.js 文件的情况下，我认为对客户而言成本最低的解决方案是将 regenerator-runtime/runtime.js 添加到输出而不是所有的 polyfill。
// runtime.js
npm install --save regenerator-runtime
// building the custom babelHelper.js
fs.writeFile(
'./babelHelpers.js',
fs.readFileSync('node_modules/regenerator-runtime/runtime.js')
+ '\n'
+ require('babel-core').buildExternalHelpers()
)
当包含 babel-polyfill.
我需要支持的目标浏览器已经支持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
}]
]
}
我在 Chrome 遇到过这个问题。类似于 RienNeVaPlu͢s 的回答，这为我解决了：
npm install --save-dev regenerator-runtime
然后在我的代码中：
import 'regenerator-runtime/runtime';
很高兴避免来自 babel-polyfill 的额外 200 kB。
我有 regeneratorRuntime is not defined 错误 当我在我的反应应用程序中使用 'async' 和 'await' 'async' 和 'await' 是 ES7 中的新关键字 为此你应该使用 babel-preset-es2017 安装这个 devDependencies:
`
"babel-preset-es2017": "^6.24.1", "babel-preset-react": "^6.24.1", "babel-preset-stage-0": "^6.24.1", `
并使用这个
"presets": [ "es2017" , "stage-0" , "react" ]
给 babel 7 用户和 Parcel JS >= 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
}]
]
}
根据以下示例更新您的 .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"
}
}
]
]
}
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"]
]
}
如果您要构建应用程序，则只需要 @babel/preset-env 和 @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 问题）仅 如果它们被任何人需要你的目标 environments/browsers.
我在尝试 运行 Mocha + Babel 时遇到了这个问题。我有一个在开发中工作的 .babelrc（请参阅此处的其他答案，它们非常完整），但我的 npm run test 命令仍在抱怨 regeneratorRuntime is not defined。所以我修改了我的 package.json:
"scripts": {
"test": "mocha --require babel-polyfill --require babel-core/register tests/*.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 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 is used, you replace @babel/runtime with @babel/runtime-corejs2 (for "corejs": 2) or @babel/runtime-corejs3 (for "corejs": 3).
我正在使用 React 和 Django 项目，并通过使用 regenerator-runtime 让它工作。您应该这样做，因为 @babel/polyfill 会更多地增加您的应用程序的大小，并且也是 deprecated. I also followed this tutorial's episode 1 & 2 to create my project's 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'));
...
此解决方案已过时。
我在该视频的 YouTube 评论中找到了解决方案 https://www.youtube.com/watch?v=iWUR04B42Hc&lc=Ugyq8UJq-OyOzsKIIrB4AaABAg
这应该指向正确的评论。 "beth w" 找到解决方案的很多支持。
Beth W 3 months ago (edited)
Another change I had to make in 2019 - babel no longer uses the stage-0 preset as of v7 apparently, so at 26:15 instead of 'npm install --save-dev babel-polyfill babel-preset-stage-0', I had to do:
npm install --save @babel/polyfillWhich covers both of the older options. Then, in the entry point for the app I > included '@babel/polyfill', and in the query presets I left it as-is. So the webpack config ends up looking like:
const path = require('path');
module.exports = {
entry: {
app: ['@babel/polyfill', './src/app.js']
},
output: {
path: path.resolve(__dirname, 'build'),
filename: 'app.bundle.js'
},
mode: 'development',
module: {
rules: [{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['@babel/preset-env']
}
}]
}
}
Hope that helps someone!
截至 2019 年 10 月，这对我有用：
将此添加到预设中。
"presets": [
"@babel/preset-env"
]
然后使用 npm 安装 regenerator-runtime。
npm i regenerator-runtime
然后在您的主文件中使用：（此导入仅使用一次）
import "regenerator-runtime/runtime";
这将使您能够在文件中使用 async awaits 并删除 regenerator error
供日后参考 :
从 Babel 版本 7.0.0-beta.55 开始，阶段预设已被删除
参考博客https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets
async await 仍然可以被
使用https://babeljs.io/docs/en/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（需要使用转译的生成器函数）：
import "core-js/stable";
import "regenerator-runtime/runtime";
信息来自 babel-polyfill documentation.
在您的控制台中解决此问题的最简单方法'regeneratorRuntime not defined issue'：
您不必安装任何不必要的插件。只需添加：
<script src="https://unpkg.com/regenerator-runtime@0.13.1/runtime.js"></script>
在你的体内 index.html。 现在 regeneratorRuntime 应该在你 运行 babel 定义后现在你的 async/await 函数应该成功编译到 ES2015
在 React 预设之前使用 stage-2 预设对我有帮助：
npx babel --watch src --out-dir . --presets stage-2,react
以上代码在安装以下模块时有效：
npm install babel-cli babel-core babel-preset-react babel-preset-stage-2 --save-dev
这个错误是在没有正确的 Babel 插件的情况下使用 async/await 函数引起的。截至 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'],
};
上面的回答太多了，我post我的回答供大家参考。 我使用 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
}
}
},
],
},
};
只是不知道为什么暂时不需要安装async包
只需安装：
npm install --save-dev @babel/plugin-transform-runtime
并将其添加到 Babel 的插件数组中。
只需安装 regenerator-runtime 使用以下命令
npm i regenerator-runtime
在需要服务器文件之前在启动文件中添加以下行
require("regenerator-runtime/runtime");
到目前为止这对我有用
或者，如果您没有使用像 webpack 或 rollup 这样的捆绑器，您可以作为一种解决方法，只需在 index.html.[=] 中使用普通的旧脚本标签导入 https://raw.githubusercontent.com/facebook/regenerator/master/packages/regenerator-runtime/runtime.js 的内容。 11=]
不是最优的，但在我的情况下是唯一的解决方案。
- 安装
@babel-polyfill并将其保存在您的开发依赖项中
npm install --save-dev @babel/polyfill
- 复制并粘贴
require("@babel/polyfill");到您的条目文件的顶部
Entry.js
require("@babel/polyfill"); // this should be include at the top
在条目数组中添加@babel/polyfill
您的预设数组中需要预设环境
webpack.config.js
const path = require('path');
require("@babel/polyfill"); // necesarry
module.exports = {
entry: ['@babel/polyfill','./src/js/index.js'],
output: {
path: path.resolve(__dirname, 'to_be_deployed/js'),
filename: 'main.js'
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
mode: 'development'
}
安装babel-polyfill
npm install --save @babel/polyfill更新webpack文件
entry: ["@babel/polyfill", "<your enter js file>"]
如果您使用的是下一个 js，请将 import regeneratorRuntime from "regenerator-runtime"; 添加到引发错误的文件中，对我来说，该文件是 _document.js.
并添加
[
"@babel/plugin-transform-regenerator",
{
"asyncGenerators": false,
"generators": false,
"async": false
}
]
在 plugins 中，在 .babelrc 文件中。
我使用了 https://github.com/babel/babel/issues/9849#issuecomment-592668815 的技巧并将 targets: { esmodules: true,} 添加到我的 babel.config.js。
module.exports = {
presets: [
[
'@babel/preset-env',
{
targets: {
esmodules: true,
},
},
],
],
}
进口'babel-polyfill'
你在哪里使用异步等待
尝试将此添加到您的 package.json
"browserslist": [
"last 2 Chrome versions"
]
对我有用！