mit async/await mit webpack-einfache Konfiguration werfen Fehler: RegeneratorRuntime nicht definiert
Bin ich mit dem webpack-einfache Vorlage mit folgenden Konfigurationen:
Paket.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 }],
]
}
unten ist wie ich async/await in meine Komponente
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);
});
},
}
Aber wenn ich die app starte, bekomme ich die Fehlermeldung:
ReferenceError: regeneratorRuntime ist nicht definiert
und auch die Komponente ist, die nicht angezeigt werden
- Mögliche Duplikate von Babel 6 regeneratorRuntime ist nicht definiert
- Zusätzlich zu den bereitgestellten Lösungen können Sie das
useBuiltIns
Möglichkeitbabel-preset-env
.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Um await/async Sie müssen Sie installieren, ein paar von Babel Abhängigkeiten. Dies funktioniert mit Vuejs Projekt -
Einmal installiert, müssen Sie ändern Sie Ihre .babelrc - Datei so verwenden Sie das plugin wie folgt -
und auch Ihre webpack.config.js - Datei zur Verwendung des regenerators wie folgt -
Die notwendigen änderungen entsprechend Ihrer Projekt-Struktur und Dateinamen etc.
Verwenden async & erwarten, Sie sollten 2 plugins, um Ihre babel config:
https://babeljs.io/docs/plugins/transform-async-to-generator/ und https://babeljs.io/docs/plugins/syntax-async-functions/
Sohail ' s Lösung funktioniert. Ich hatte eine asynchrone Funktion, die bis Ende wirft den Fehler...
Sicher zu sein, habe ich die vue-cli zu bauen, mein Projekt. Als solche, ich habe ein vue.config.js, die auf compile-Zeit injiziert Inhalte in webpack.config.
(Info auf, die gefunden werden können hier)
So, in vue.config.js ich habe Folgendes:
}
Dann, in babel.config.js ich habe diese:
Ich hoffe, das hilft!