使用带有 webpack-simple 配置的 async/await 抛出错误：RegeneratorRuntime 未定义

Posted 2023-02-22

【中文标题】使用带有 webpack-simple 配置的 async/await 抛出错误：RegeneratorRuntime 未定义

【英文标题】：using async/await with webpack-simple configuration throwing error: RegeneratorRuntime not defined

【发布时间】：2018-03-05 11:34:30

【问题描述】：

我正在使用具有以下配置的 webpack-simple 模板：

package.json

  "name": "vue-wp-simple",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "v",
  "private": true,
  "scripts": 
    "dev": "webpack-dev-server --inline --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  ,
  "dependencies": 
    "vue": "^2.3.3",
    "vue-router": "^2.7.0",

  ,
  "devDependencies": 
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-env": "^1.5.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "style-loader": "^0.18.2",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "vue-loader": "^12.1.0",
    "vue-template-compiler": "^2.3.3",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  
 

.babelrc

  "presets": [
    ["env",  "modules": false ],
  ]
 

下面是我如何在组件中使用 async/await

async mounted()
            //this.$store.dispatch('loadImg', this.details.imgUrl).then((img) => 
                //this.drawImage(img);    
            //);

            var result = await this.loadImg();
            console.log(result);
        ,
        methods:
            async loadImg()
                return new Promise((resolve, reject) => 
                    setTimeout(() => 
                        resolve('yeah async await works!');
                    , 2000);
                );
            , 
         

但是当我运行应用程序时，我得到了错误： ReferenceError: regeneratorRuntime 未定义 甚至组件都没有显示

【问题讨论】：

Babel 6 regeneratorRuntime is not defined的可能重复

除了提供的解决方案，您还可以使用useBuiltIns option of babel-preset-env。

【参考方案1】：

为了使用 await/async，您需要安装几个 Babel 依赖项。这适用于 Vuejs 项目 -

npm install --save-dev babel-polyfill
npm install --save-dev babel-plugin-transform-regenerator

安装后，您需要修改 .babelrc 文件以使用该插件，如下所示 -

    "plugins": ["transform-regenerator"]

还有你的 webpack.config.js 文件来使用再生器，如下所示 -

require("babel-polyfill");

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

根据您的项目结构和文件名等进行必要的更改。

【讨论】：

谢谢。对于 Babel v. 7.0+，应相应地使用 @babel/plugin-transform-regenerator 和 @babel/polyfill。

【参考方案2】：

要使用 async 和 await，你应该在你的 babel 配置中添加 2 个插件： https://babeljs.io/docs/plugins/transform-async-to-generator/ 和 https://babeljs.io/docs/plugins/syntax-async-functions/

【参考方案3】：

我只是通过以下方式获得了异步函数：

1) 使用 VUE CLI 或终端安装以下开发依赖项

在 Vue CLI 中

终端示例：

npm install --save-dev babel-polyfill
npm install --save-dev babel-plugin-transform-regenerator

2) 然后在我的 main.js 文件（或创建 vue 对象的文件（新 Vue）中添加以下导入

import '@babel/polyfill'

【讨论】：

我相信您的终端示例正在安装旧版本，应该是：@babel/plugin-transform-regenerator 和 @babel/polyfill

【参考方案4】：

Sohail's solution 有效。我有一个异步函数，最终抛出了错误......

可以肯定的是，我使用 vue-cli 来构建我的项目。因此，我有一个 vue.config.js，它在编译时将内容注入 webpack.config。

（可以在here找到相关信息）

所以，在 vue.config.js 我有以下内容：

module.exports = 
configureWebpack: 
    entry: ['@babel/polyfill', './src/main.ts'],
    plugins: [
    ]
,
chainWebpack: config => 
    config.resolve.alias.set('@image', path.resolve(__dirname, 'public/img'));
    config.resolve.alias.set('@dev', path.resolve(__dirname, 'dev-server'));
,

然后，在 babel.config.js 我有这个：

module.exports = 
 presets: [
   '@babel/env',
 ],
 plugins: [
  "transform-regenerator"
 ],

【讨论】：

删除绒毛的编辑are fine。请不要进一步回滚。

【参考方案5】：

我遇到了同样类型的错误，并以这种方式解决了：

第 1 步：运行此命令

npm install --save-dev babel-polyfill babel-plugin-transform-regenerator

因为我在我的代码中使用了async/await，它不受支持或转移到没有polyfill 插件的旧javascript。

第二步：配置webpack.config.js文件

require('babel-polyfill');
        
module.exports = 
   entry: ['babel-polyfill', './src/main.js'],
   ...

第 3 步：使用此代码 "plugins": ["transform-regenerator"] 更新 .babelrc 文件，如下所示

      "presets": [
        ["env",  "modules": false ],
        "stage-3"
      ],
      "plugins": ["transform-regenerator"]