... Vue.js 中的 mapState SyntaxError，带有 vuex

Question

当我在 vue.js 中使用 ...mapState 时，在使用 webpack 捆绑文件时遇到了错误。错误是

模块构建失败：SyntaxError: Unexpected token。

我尝试过各种 babel 插件，例如 stage-0 和 transform-object-rest-spread。

但是，对我来说似乎没有一个可以。请您告诉我如何解决它？

源代码是

<script type="text/babel">

    import { mapState } from 'vuex';


    let [a, b, ...other] = [1,2,3,5,7,9]; // this line is ok

    console.log(a);

    console.log(b);

    console.log(other); 

    export default{

        computed:{

            localComputed(){

                return 10;

            },

            ...mapState({ //this line caused the error

                count: state => state.count

            })

        },

        methods: {
            increment() {
                this.$store.commit('increment');
            },
            decrement() {
                this.$store.commit('decrement');
            }
        }
    }
</script>

这是 webpack 配置片段

{
    test: /\.(js|es|es6|jsx)$/,
    use: [
        {
            loader: 'babel-loader',
            options: {
                presets: [
                    ['react'],
                    ['es2015', {modules: false, loose: true}],
                    ['stage-2']
                ],
                plugins: [
                    ['transform-runtime'],
                    // https://github.com/JeffreyWay/laravel-mix/issues/76
                    ['transform-object-rest-spread'],
                    ['transform-es2015-destructuring']
                ],
                comments: false,
                cacheDirectory: true
            }
        },
        {
            loader: 'eslint-loader',
            options: {
                configFile: eslintConfigPath
            }
        }
    ],
    exclude: excludeReg
}

Answer 1

不久前我遇到了类似的问题。据我所知，您的问题是您的 babel-loader 目前不适用于 .vue 文件（这是正确的）。

处理.vue 文件的vue-loader 在内部也使用babel，但它不会使用webpack 的babel-loader 配置。在 vue-loader 中为 babel 提供配置的最简单方法是（不幸的是）在项目的根文件夹中使用 babel 配置创建一个单独的 .babelrc 文件：

.babelrc

{
    presets: [
        ["react"],
        ["es2015", { "modules": false, "loose": true}],
        ["stage-2"]
    ],
    plugins: [
        ["transform-runtime"],
        ["transform-object-rest-spread"],
        ["transform-es2015-destructuring"]
    ]
}

请注意，.babelrc 需要有效的 JSON。