解决 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 的支持解决了问题,不过跟我这种不一样先记下来。

上一篇:json_decode时含有中文是解码问题(json_decode返回为null)


下一篇:ubuntu 常用命令及一些问题collection