webpack - Webpack和Babel-Loader-Object Rest Operator上的意外 token ，安装了transform-object-rest-spread插件

我正在尝试创建一个简单的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捆绑并使用巴贝尔编译，使用以下配置：

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'
})

我的网页包配置中是否缺少某些内容？我知道Spread操作符最近被从stage-2预置中移除，所以我想我应该手动添加Spread操作符作为插件。
提前感谢您的帮助！

最佳答案

您应该将与babel相关的配置从webpack.config.js文件移动到项目根目录中的独立.babelrc文件。
新创建的.babelrc文件应该如下所示

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

更多信息请点击：https://babeljs.io/docs/usage/babelrc/