我正在尝试在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版本7.0.0-beta.55起,已删除舞台预设

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

异步等待仍然可以由

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

安装

npm install --save @babel/polyfill

webpack.config.js

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

其他回答

新答案你为什么要听我的答案?

答:因为我将用最新的更新版本npm项目给你们一个答案。

04/14/2017

"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的回答。

至babel7用户和ParcelJS>=1.1.0用户

npm i @babel/runtime-corejs2
npm i --save-dev @babel/plugin-transform-runtime @babel/core

巴氏合金

{
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "corejs": 2
    }]
  ]
}

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

这些答案中的大多数都推荐了使用WebPack处理此错误的解决方案。但如果有人在使用RollUp(就像我一样),以下是最终对我有效的方法(只需一个提示,将这个polyfill广告捆绑在一起,总输出大小约为10k):

巴氏合金

{
    "presets": [
        [
            "env",
            {
                "modules": false,
                "targets": {
                    "browsers": ["last 2 versions"]
                }
            }
        ]
    ],
    "plugins": ["external-helpers",
        [
            "transform-runtime",
            {
                "polyfill": false,
                "regenerator": true
            }
        ]]
}

汇总配置.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()

    ]
};

使现代化

如果你将目标设置为Chrome,它就会起作用。但它可能不适用于其他目标,请参阅:https://github.com/babel/babel-preset-env/issues/112

因此,这个答案对于最初的问题来说不太合适。我将把它保存在这里,作为babel预置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的哲学:告诉我你想要支持哪个环境,而不是告诉我如何支持它们。这是声明式编程的优点。

我已经测试了异步等待,它们确实有效。我不知道它们是如何工作的,我真的不想知道。我想把时间花在我自己的代码和业务逻辑上。多亏了babel预置env,它将我从babel配置地狱中解放出来。

在一个使用babel.buildExternalHelpers()和babel插件外部帮助程序创建自定义babelHelpers.js文件的场景中,我认为对客户端来说成本最低的解决方案是将再生器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时,此解决方案减少到约20KB,而不是约230KB。