У меня есть небольшое приложение vue, которое содержит несколько .vue отдельных файловых компонентов.Один из компонентов имеет несколько простых асинхронных функций, которые я хотел бы преобразовать в дружественный к ES5 код с помощью преобразований Babel «асинхронизация с генератором» и «регенератор».У меня есть асинхронные функции в других .js файлах, которые конвертируются правильно, поэтому я знаю, что преобразования настроены правильно и работают так, как должны.Кроме того, другие преобразования Babel успешно применяются к файлу .vue, поэтому кажется, что js-часть .vue проходит через babel, но я немного растерялся, почему эти функции не работаютпреобразован правильно.Например, в файле .vue у меня есть метод:
addQuestion: async function () {
try {
/* Test code */
const tempLit = `this is a template string - ${num}`;
let temp = 3;
/********************/
const id = await Api.addQuestion(this.form.id); //responds with Id
const question = { order: this.questions.length + 1, id: id, isNew: true, deleted: false };
this.form.questions.push(question);
$("html, body").animate({ scrollTop: document.body.scrollHeight }, 500);
} catch (e) {
this.error(e);
}
}
, который преобразуется в следующий пакет в пакете через веб-пакет:
addQuestion: async function addQuestion() {
try {
/* Test code */
var tempLit = "this is a template string - " + num;
var temp = 3;
/********************/
var id = await _FormsApi2.default.addQuestion(this.form.id); //responds with Id
var question = { order: this.questions.length + 1, id: id, isNew: true, deleted: false };
this.form.questions.push(question);
$("html, body").animate({ scrollTop: document.body.scrollHeight }, 500);
} catch (e) {
this.error(e);
}
}
Как видно изНебольшой образец тестового кода между комментариями, некоторые функции ES6 успешно конвертируются, что говорит о том, что js запускается через babel.
Поэтому я предполагаю, что мой вопрос заключается в том, нужно ли что-то конкретное, что необходимо сделать, чтобы функции ES7, такие как асинхронная работа в .vue файлах?
Моя текущая конфигурация веб-пакета выглядит следующим образом:
{
entry: [
"babel-polyfill", // Set up an ES6-ish environment
"whatwg-fetch", // fetch polyfill
].concat(modules),// application entry point
output: {
filename: "./assets/scripts/vue/bundle.js"
},
module: {
noParse: /es6-promise\.js$/,
loaders: [
{
test: /\.vue$/,
loader: "vue-loader",
options: {
loaders: {
js: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
}
}
},
{
test: /\.js$/,
exclude: file => (/node_modules/.test(file) && !/\.vue\.js/.test(file)),
loader: "babel-loader",
query: {
plugins: [
"transform-runtime",
"transform-regenerator", // not needed in Chrome or Firefox. Soon won't be needed in Edge or Safari.
"transform-async-to-generator",
"transform-es2015-template-literals"
],
presets: ["es2015"]
}
},
{
test: /\.s[a|c]ss$/,
loader: 'style!css!sass'
}
]
},
plugins: [
// responsible for identifying common files and generating a shared bundle
//new webpack.optimize.CommonsChunkPlugin({
// name: 'common' // Specify the common bundle's name.
//}),
new WebpackNotifierPlugin(),
],
resolve: {
alias: {
'vue': "vue/dist/vue.min.js"
}
}
}