Однофайловый компонент Vue - Babel не передает асинхронные функции

У меня есть небольшое приложение vue, которое содержит несколько однофайловых компонентов .vue. Один из компонентов имеет несколько простых асинхронных функций, которые я хотел бы преобразовать в дружественный к ES5 код с помощью бабел-преобразований «асинхронный генератор» и «регенератор». У меня есть асинхронные функции в других файлах .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);
    }
}

это преобразуется в следующий код в пакете с помощью webpack:

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, такие как async, работали в файлах .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"
        }
    }
}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
375
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема устранена путем добавления предустановки babel stage 3.

Другие вопросы по теме