Question

我有一个小的vue应用程序，其中包含一些.vue单个文件组件。其中一个组件有一些简单的异步函数，我希望通过＆＃34; async to generator＆＃34;转换为ES5友好代码。和＆＃34;再生＆＃34;巴贝尔改造。我在正确转换的其他.js文件中有异步函数，因此我知道转换已正确配置并按预期工作。此外，其他babel变换正在成功应用于.vue文件，因此似乎.vue的js部分正在通过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功能，例如异步工作在.vue个文件中？

我当前的webpack配置如下所示：

{
    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"
        }
    }
}

Answer 1

通过添加babel stage 3预设

来解决问题

Vue单个文件组件 - 异步函数不会被babel

1 个答案: