Babel 6中regeneratorRuntime未定义

我正在使用一个React和Django项目，并且通过使用regenerator-runtime使其正常工作。您应该这样做，因为@babel/polyfill将增加应用程序的大小，而且已经被弃用。我还遵循此教程的第1和第2集来创建我的项目的结构。

*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'));
...

供将来参考：

从Babel版本7.0.0-beta.55开始，阶段预设已被移除。

详见博客：https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets

仍然可以使用async/await ，方法是使用 babel-plugin-transform-async-to-generator

安装

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

尝试将此内容添加到您的package.json文件中。

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

那对我很有效！

这个解决方案已经过时。

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

应该会直接跳到正确的评论。非常感谢"beth w"找到了解决方案。

Beth W 3 months ago (edited)
在2019年，我必须做出另一个更改- babel似乎不再使用stage-0预设作为v7，因此在26:15，不是 'npm install --save-dev babel-polyfill babel-preset-stage-0'，而是：

npm install --save @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']
            }
        }]
    }
}

大多数答案都是针对使用WebPack解决此错误的解决方案。但是，如果有人正在使用RollUp（就像我一样），这是我最终运行的内容（只是一个预警，并将此polyfill捆绑到输出中，会增加约10k的大小）：

.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()

    ]
};

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

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

# Browsers that we support

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

如果你在前端使用Gulp + Babel，你需要使用babel-polyfill。

npm install babel-polyfill

然后在index.html的所有脚本标签之前添加一个script标签，从node_modules中引用babel-polyfill。

1. 安装@babel-polyfill并将其保存在您的开发依赖项中。

npm install --save-dev @babel/polyfill

2. 将 require("@babel/polyfill"); 拷贝并粘贴到你的入口文件顶部

Entry.js

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

3. 在入口数组中添加@babel/polyfill。

4. 在预设数组中需要使用preset-env。

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

只需安装：

npm install --save-dev @babel/plugin-transform-runtime

并将其添加到 Babel 的插件数组中。

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 文档的信息。