使用 async/await 和 webpack-simple 配置抛出错误:未定义 RegeneratorRuntime [英] using async/await with webpack-simple configuration throwing error: RegeneratorRuntime not defined
问题描述
我正在使用具有以下配置的 webpack-simple 模板:
I am using webpack-simple template with following configurations:
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
below is how I use async/await in my component
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 未定义甚至组件都没有显示
But when I run the app I get the error: ReferenceError: regeneratorRuntime is not defined and even the component is not being displayed
推荐答案
为了使用 await/async,您需要安装几个 Babel 依赖项.这适用于 Vuejs 项目 -
In order to use await/async you will need to install a couple of Babel dependencies. This works with Vuejs project -
npm install --save-dev babel-polyfill
npm install --save-dev babel-plugin-transform-regenerator
安装后,您需要修改您的 .babelrc 文件以使用该插件,如下所示 -
Once installed, you will need to modify your .babelrc file to use the plugin as follows -
{
"plugins": ["transform-regenerator"]
}
以及您的 webpack.config.js 文件以使用再生器,如下所示 -
and also your webpack.config.js file to use the regenerator as follows -
require("babel-polyfill");
module.exports = {
entry: ["babel-polyfill", "./app.js"]
};
根据您的项目结构和文件名等进行必要的更改
这篇关于使用 async/await 和 webpack-simple 配置抛出错误:未定义 RegeneratorRuntime的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!