使用异步/等待与webpack-简单配置抛出错误:未定义RegeneratorRuntime

webpack Webpack

卡卡西乐逆天

2020-03-12

我正在使用具有以下配置的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未定义 ,甚至该组件也未显示

第1359篇《使用异步/等待与webpack-简单配置抛出错误:未定义RegeneratorRuntime》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

2个回答
猿神奇梅 2020.03.13

为了使用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"]
};

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

entaseven 2020.03.13

要使用异步并等待,您应该在babel配置中添加2个插件:https : //babeljs.io/docs/plugins/transform-async-to-generator/https://babeljs.io/docs/plugins/syntax -异步功能/

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android