解決 vuex mapGetters 語法報錯 （Unexpected token ）

在使用vuex2的mapGetters 和 mapActions 的方法時，借助 stage2 的 Object Rest Operator 特性,可以寫出下面代碼： 

computed: {
    ...mapGetters([  // … 三個點，在框架語言里，就是傳對象
        'hadChannels',
        'currentChannel'
    ])
}

　　

但是在借助babel編譯轉換時發生了報錯： BabelLoaderError: SyntaxError: Unexpected token 。 

搜索一番，結果是babel 沒有解析成功，看來是 babel的配置為問題

原來的 .babelrc

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"]
}

　　

解決方案

接着在babel的issues中搜索這樣的報錯，原來是我babel預置的轉換器是 babel-preset-es2015 ，並不能轉換 Object Rest Operator 特性。 
1. 安裝 Object Rest Operator 的babel插件  npm i -D babel-plugin-transform-object-rest-spread 。 

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

 

2. 安裝整個stage2的預置器  npm i -D  babel-preset-stage-2

babel: { 
presets: ["stage-2"], 
plugins: [
    "transform-runtime"
    ] 
} 

安裝、配置都完成以后 ，重啟webpack，就不會再有報錯了。

后記：還有人修改了eslint配置中對 Object Rest Operator 的支持解決了問題，不過跟我這種不一樣先記下來。