我正在尝试在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的情况下正常使用它,效果很好。知道我做错了什么吗?


当前回答

我需要支持的目标浏览器已经支持异步/等待,但是在编写mocha测试时,如果没有正确的设置,我仍然会遇到这个错误。

我在谷歌上搜索的大多数文章都过时了,包括这里的公认答案和高投票率答案,即你不需要polyfill、babel再生器运行时、babel插件转换运行时。如果您的目标浏览器已经支持异步/等待(当然,如果您不需要polyfill)

我也不想使用webpack。

泰勒·龙的答案实际上是正确的,因为他建议babel预置env(但我先省略了它,因为他在开头提到了polifill)。我仍然得到了ReferenceError: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
      }]
    ]
  }

其他回答

此解决方案已过时。

我在这个视频的youtube评论中找到了解决方案https://www.youtube.com/watch?v=iWUR04B42Hc&lc=Ugyq8UJq-OyOzsKIIrB4AaABAg公司

这应该指向正确的注释。“贝丝w”找到了解决方案。

Beth W 3个月前(编辑)我在2019年不得不做的另一个改变是,babel显然不再使用v7之前的阶段0预设,所以在26:15时,我不得不做的不是“npm install--save dev babel polyfill babel-preset-stage-0”,而是:npm安装--保存@babel/polyfill这包括两个旧选项。然后,在应用程序的入口点中,我>包含了“@babel/polyfill”,并在查询预设中保持原样。因此,webpack配置最终看起来像:

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

希望这对某人有所帮助!

尝试将其添加到package.json中

"browserslist": [
  "last 2 Chrome versions"
]

这对我有用!

更新:Babel 7的帖子也有更深入的答案。


Babel 7.4.0或更高版本(核心js 2/3)

从Babel 7.4.0开始,@Babel/polyfill已弃用。

通常,有两种方法安装polyfills/reduator:通过全局命名空间(选项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 .    
    },
  }]
]

将根据您的目标自动使用再生器运行时和核心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
        ...
      }
    ]
  ]
}
Install it:
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/preset-env和@babel/polyfill:

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

(注意:您不需要安装core js和再生器运行时包,因为它们都将由@babel/polyfill安装)

然后在.babelrc中:

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

现在设置目标环境。在这里,我们在.browserlistrc文件中执行此操作:

# Browsers that we support

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

最后,如果使用useBuiltIns:“entry”,请将import@babel/polyfill放在条目文件的顶部。否则,你就完蛋了。

使用此方法将有选择地导入那些polyfills和“再生器运行时”文件(此处未定义修复再生器的运行时问题),前提是任何目标环境/浏览器都需要它们。

我有regeneratorRuntime未定义错误当我在react应用程序中使用“异步”和“等待”时“async”和“await”是ES7中的新关键字为此,您应该使用babel-preset-es2017安装此devDependencies:

`

“babel-preset-es2017”:“^6.24.1”,“babel预设反应”:“^6.24.1”,“babel-preset-stage-0”:“^6.24.1”`

并使用此

“预设”:[“es2017”,“stage-0”,“react”]