WebPackがVueで認識しないスプレッドオペレータ

Question

this answerには、次の構文が提案されています。

import { mapActions } from 'vuex' 
export default { 
    vuex: { 
    getters: { activeDataRow: state => state.activeDataRow }, 
    actions: { updateData, resetData } 
    }, 
    methods: { ...mapActions(['updateData', 'resetData']) } 
} 

私はそれを動作させることができないと私はエラーを取得しています：

Module build failed: SyntaxError: C:/.../navigation.vue: Unexpected token (30:8)

29 | methods: {
30 | ...mapActions(['updateData', 'resetData'])
| ^
31 | }

私はconfiguring Babel to stage-2とadding pluginsを試みたが、それは何の変化も行われません。それについて何ができるのですか？どのようにトラブルシューティングを行うのですか？

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

webpack.config.js

module.exports = { 
    entry: './index.js', 
    output: { path: __dirname, filename: 'bundle.js' }, 
    module: { 
    loaders: [ 
     { test: /\.js$/, loader: 'babel', exclude: /node_modules/ }, 
     { test: /\.vue$/, loader: 'vue' }] 
    }, 
    babel: { 
     presets: ["es2015", "stage-2"], 
     plugins: ['transform-runtime'] 
    }, 
    resolve: { alias: { 'vue$': 'vue/dist/vue.common.js' } } 
} 

Answer 1

これは、ソリューションのいずれかになります。あなたは次のように、jsコードのためにあなたの設定ファイルにbabel loaderを持っている必要があります。

module: { 
    loaders: [ 
    { 
     test: /\.vue$/, 
     loader: 'vue' 
    }, 
    { 
     test: /\.js$/, 
     loader: 'babel', 
     include: projectRoot, 
     exclude: /node_modules/ 
    }, 
    ... 
    ... 

後、私のバベル関連の依存関係です：あなたはこのrepoでこの設定およびその他の関連するコードを見ることができます

"babel-core": "^6.0.0", 
"babel-eslint": "^7.0.0", 
"babel-loader": "^6.0.0", 
"babel-plugin-transform-runtime": "^6.0.0", 
"babel-polyfill": "^6.16.0", 
"babel-preset-es2015": "^6.0.0", 
"babel-preset-stage-2": "^6.0.0", 
"babel-register": "^6.0.0", 
"babel-core": "^6.0.0", 
"babel-eslint": "^7.0.0", 
"babel-loader": "^6.0.0", 
"babel-plugin-transform-runtime": "^6.0.0", 
"babel-polyfill": "^6.16.0", 
"babel-preset-es2015": "^6.0.0", 
"babel-preset-stage-2": "^6.0.0", 
"babel-register": "^6.0.0", 

。