używam szablonu WebPACK-proste z następujących konfiguracjach:użyciu asynchronicznie/czekają z WebPACK-prostej konfiguracji rzucanie błędzie: RegeneratorRuntime niezdefiniowane
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 }],
]
}
poniżej opisuję sposób korzystania z asynchronizacji/czekania w moim komponencie
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);
});
},
}
Ale gdy uruchamiam aplikację pojawia się błąd: ReferenceError: regeneratorRuntime nie jest zdefiniowana a nawet element nie jest wyświetlany
Możliwy duplikat [Babel 6 regeneratorRuntime nie jest zdefiniowany] (https://stackoverflow.com/questions/33527653/babel-6-regeneratorruntime-is-not- zdefiniowane) –
Oprócz dostarczonych rozwiązań, możesz użyć opcji ['useBuiltIns'' babel-preset-env'] (https://github.com/babel/babel-preset-env#usebuiltins). –