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


当前回答

笔记如果您使用的是babel7,则该包已重命名为@babel/plugin-transform runtime。

除了polyfill,我还使用babel插件转换运行时。插件描述如下:

外部化对助手和内置程序的引用,自动聚合填充代码而不会污染全局。这到底意味着什么?基本上,您可以使用Promise、Set、Symbol等内置功能,也可以无缝使用所有需要polyfill的Babel功能,而不会造成全局污染,因此非常适合于库。

它还支持异步/等待以及ES6的其他内置功能。

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

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

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

其他回答

当我尝试使用ES6生成器时,使用gulf with 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组件:

bower install babel-polyfill --save

并将其作为依赖项添加到index.html中:

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

安装@babel polyfill并将其保存在开发依赖项中

npm安装--保存dev@babel/polyfill

复制和粘贴需要(“@babel/polyfill”);在输入文件的顶部

入口.js

require("@babel/polyfill"); // this should be include at the top

在条目数组中添加@babel/polyfill您需要在预设数组中预设env

webpack.config.js

常量路径=require('path');要求(“@babel/polyfill”);//必要的,必要的模块导出={条目:['@babel/polyfill','./src/js/index.js'],输出:{路径:路径.解析(__dirname,'to_be_deployed/js'),文件名:'main.js'},模块:{规则:[{测试:/\.m?js$/,exclude:/node_modules/,使用:{loader:“babel loader”,选项:{预设:['@babel/preset-env']}}}]},mode:'开发'}

或者,如果您没有使用像webpack或rollup这样的bundler,那么作为解决方法,您可以只导入https://raw.githubusercontent.com/facebook/regenerator/master/packages/regenerator-runtime/runtime.js在index.html中使用普通的旧脚本标记。

不是最优的,但在我的情况下,这是唯一的解决方案。

供将来参考:

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

此解决方案已过时。

我在这个视频的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']
            }
        }]
    }
}

希望这对某人有所帮助!