Question

我正在尝试创建一个简单的VueJS项目，并且无法遵循Vuex文档中给出的示例说明之一。我已经创建了一个Vuex模块来封装应用程序的一个模块的状态，如下所示：

export default new Vuex.Store({
    modules: {
        namespaced: true,
        state: {
            created: false,
            // Other variables...
        },
        mutations: {
            CREATE(state) {
                state.app.created = true;
            }
        },
        actions: {
            createCampaign({ commit }) {
                commit('app/CREATE');
            }
        }
    }
});

然后我尝试在我的一个Vue组件中使用上面定义的actions：

<template>
    <!-- HTML -->
</template>

<script>
    import { mapActions } from 'vuex';

    let methods = { 
        ...mapActions('app', {
            create: 'createCampaign'
        })
    };

    export default {
        // data, computed...
        methods
    }
</script>

然后它应该由Webpack捆绑并使用Babel编译，使用以下配置：

const javascriptRule = {
    test: /\.js$/,
    exclude: /node_modules/,
    use: [{
        loader: 'babel-loader',
        options: {
            presets: ['es2015'],
            plugins: [ 'transform-object-rest-spread' ]
        }
    }]
};

const vueRule = {
    test: /\.vue$/,
    loader: 'vue-loader'
};

module.exports = {
    entry: /* app entry... */,

    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'app.js'
    },

    module: {
        rules: [javascriptRule, vueRule, /* other rules... */]
    },

    // Plugins, other things...
};

但是，当我构建应用程序时，我收到以下错误消息：

Unexpected token:
...mapActions('app', {
^
    create: 'createCampaign'
})

我是否遗漏了Webpack配置中的内容？我知道扩展运算符最近已从stage-2预设中删除，所以我想我会手动将扩展运算符作为插件添加。

提前感谢您的帮助！

Answer 1

您应该将与Babel相关的配置从webpack.config.js文件移动到项目根目录中的单独.babelrc文件。

您新创建的.babelrc文件应如下所示

{
  "presets": ["es2015"],
  "plugins": ["transform-object-rest-spread"]
}

此处有更多信息：https://babeljs.io/docs/usage/babelrc/

Webpack＆amp; Babel-Loader - 对象休息运算符上的意外令牌，安装了transform-object-rest-spread插件

1 个答案: