未定义Babel 6 regeneratorRuntime

Question

我正在尝试使用异步,从零开始等待Babel 6,但我得到的再生器运行时没有定义.

.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的情况下正常使用它可以正常工作.我有什么想法我做错了吗？

Answer 1

babel-polyfill是必须的.您还必须安装它才能使异步/等待工作.

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(示例代码)

"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,则需要根据@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

Answer 2

除了polyfill,我使用babel-plugin-transform-runtime.该插件描述为:

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

它还包括对async/await以及ES 6的其他内置函数的支持.

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

在.babelrc,添加运行时插件

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

Answer 3

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

Answer 4

更新

如果您将目标设置为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浏览器.

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

告诉我什么,不要告诉我怎么做.

我真的很喜欢babel-preset-env这个哲学:告诉我你想支持哪个环境,不要告诉我如何支持它们.这是声明性编程的美妙之处.

我已经测试过async await并且他们正在工作.我不知道它们是如何工作的,我真的不想知道.我想把时间花在我自己的代码和业务逻辑上.多亏了babel-preset-env,它让我从Babel配置中解脱出来.

Answer 5

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

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

  // ...
};

当使用带有HMR的webpack-dev-server时,这样做可以减少每次构建时必须编译的文件数量.此模块是作为一部分安装的babel-polyfill,如果您已经拥有它,那么您可以单独安装它npm i -D babel-regenerator-runtime.

Answer 6

我的简单方案:

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

Answer 7

这个错误是在async/await没有正确的 Babel 插件的情况下使用函数引起的。截至 2020 年 3 月，您只需要执行以下操作即可。（@babel/polyfill许多已接受的解决方案在 Babel 中已被弃用。在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'],
};

Answer 8

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

将此添加到预设中。

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

然后使用 npm 安装 regenerator-runtime。

npm i regenerator-runtime

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

import "regenerator-runtime/runtime";

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

Answer 9

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

要使用运行时生成器webpack和babelv7:

安装regenerator-runtime:

npm i -D regenerator-runtime

然后在webpack配置中添加:

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

Answer 10

Babel 7.4.0，Core-JS 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代替，请参见此处。

干杯

Answer 11

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

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

Answer 12

小心提升的功能

我在同一个文件中同时使用了'polyfill import'和'async function',但是我使用的函数语法将它提升到polyfill上面,这会给我带来ReferenceError: regeneratorRuntime is not defined错误.

更改此代码

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

对此

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

防止它在polyfill进口上方悬挂.

Answer 13

如果使用babel-preset-stage-2那么只需要启动脚本--require babel-polyfill.

在我的情况下,这个错误是由Mocha测试引发的.

以下修复了这个问题

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

Answer 14

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

Answer 15

将项目转换为打字稿项目后,我开始收到此错误.据我所知,问题源于异步/等待无法识别.

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

1. 如上所述,我需要将babel-polyfill添加到我的webpack入口数组中:

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

2. 我需要更新我的.babelrc以允许将async/await枚举到生成器中:

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

DevDependencies:

我还必须在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要点的代码.

Answer 16

您收到错误,因为async/await使用生成器,这是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.

Answer 17

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

npm install babel-polyfill --save

然后我在我的app入口点导入了它

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

测试我包括 - 在我的测试脚本中需要babel-polyfill

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

Answer 18

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

npm install --save-dev regenerator-runtime

然后在我的代码中：

import 'regenerator-runtime/runtime';

很高兴避免从产生额外的200 kB babel-polyfill。

Answer 19

新答案为什么你按照我的回答？

Ans:因为我打算用最新的更新版本npm项目给你答案.

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

现在检查一切正常.参考链接

还要感谢@BrunoLM的好答案.

Answer 20

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

最让我用Google搜索的文章都已经过时了,包括接受的答案,在这里高投票的答案,即你不需要polyfill,babel-regenerator-runtime,babel-plugin-transform-runtime.等等,如果你的目标浏览器(S)已经支持异步/等待(当然如果不是你所需要填充工具)

我也不想使用它们webpack.

Tyler Long的答案实际上是在他建议的正确轨道上babel-preset-env(但我在开头提到polifill时首先省略了它).我仍然得到了ReferenceError: regeneratorRuntime is not defined第一个然后我意识到这是因为我没有设定目标.为节点I设置目标后,修复了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
      }]
    ]
  }

Answer 21

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

....

Answer 22

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

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

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

在你的index.html的body里面。现在，一旦你运行 babel，就应该定义 regeneratorRuntime，现在你的 async/await 函数应该成功编译到 ES2015 中

Answer 23

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

npm i regenerator-runtime

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

require("regenerator-runtime/runtime");

到目前为止，这对我有用

Answer 24

我有一个设置
与的WebPack使用presets: ['es2015', 'stage-0']
和摩卡正运行通过的WebPack编译测试。

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

mocha --require babel-polyfill

Answer 25

当我尝试使用 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 }));
});

我可能的解决方案是包含babel-polyfill作为凉亭组件：

bower install babel-polyfill --save

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

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

Answer 26

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/

Answer 27

对于想要使用babel-polyfill版本 7^ 的人，请使用webpack版本 3^ 进行此操作。

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

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

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

Answer 28

给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

Answer 29

上面有很多答案，我会发布我的答案以供参考。我使用 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 包