vue.js - ...Vue.js 中的 mapState SyntaxError，使用 vuex

Question

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

Module build failed: 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。