使用异步/等待用的WebPack-简单的结构投掷错误：RegeneratorRuntime未定义

Question

我使用的WebPack-简单的模板与下列配置：

的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没有定义 甚至分量不被显示

Answer 1

要使用异步&等待，您应该添加2插件（星期四）02:52的配置： https://babeljs.io/docs/plugins/transform-async-to-generator/和https://babeljs.io/docs/plugins/syntax-async-functions/

Answer 2

为了使用的await /异步您需要斯塔会有一些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"] 
}; 

将T他必要的变化根据您的项目结构和文件名等