Vue-CLI用ES6编码仍需要手动安装一些Babel插件

这五一几天, 没什么事情, 想着再深入研究下Vuex, 然后又找了些教程, 结合官方文档研究. 却遇到了一个坑爹的问题...

在Vue-CLI安装完成后, 如果需要用到一些ES6语法编写代码, 有时候报错的话, 可能是缺少编译插件, 比如我在看Vuex文档和部分教程的时候, 有类似这样的代码

methods: mapActions([
  'increment',
  'decrement',
  'incrementIfOdd',
  'incrementAsync'
])

这段代码就是借用Vuex的辅助函数mapActions来使代码更简洁.

问题现象

而我一个组件中, 不可能只有这些mapActions的方法啊. 于是需要改写这个methods, 很多教程也有提到使用扩展运算符. 于是我就试着改写成如下:

methods: {
  ...mapActions([
    'increment',
    'decrement',
    'incrementIfOdd',
    'incrementAsync'
  ]),
  doSth() {
    console.log('doSth')
  }
}

这样看起来挺不错的. 编辑器内也没有提示存在语法错误. 但是按Ctrl+S的时候, 项目报错- -. 这下就懵逼了.

由于过于信任Vue-CLI默认配好的Babel环境可以编译改代码, 花了好长时间反复检查代码错误, 查扩展运算符的语法等等...

问题原因

由于ES6语法还不够熟悉, 东改改西改改, 弄了很长时间没有弄出来, 心想难道是真的不支持? 于是不爽的去找到Vuex官方Exaples - Counter的代码复制到自己项目来测试.

也就是上面我改写的那段, 居然还报错. 这下内心凉凉... 看样子折腾了很久的我, 意识到, 官方运行OK, 我这里一样的代码还是报错, 应该不是js代码的锅... 可能真的是Babel没有装好, 又想起之前看过的一篇文章好像有提到ES6的babel插件的问题. 只是我没有注意到... 文章在此:　vuex 源码：深入 vuex 之辅助函数 mapState

解决方案

那么接下来我们在Vue-CLI项目安装Object rest spread transform插件:

npm install --save-dev babel-plugin-transform-object-rest-spread

接着修改.babelrc文件, 例如

{
  "presets": [["env", { "modules": false }]],
  "plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    "transform-object-rest-spread",
    [
      "import",
      {
        "libraryName": "vant",
        "libraryDirectory": "es",
        "style": true
      }
    ]
  ]
}

接着重新运行项目. 总算正常了!

总结

有时候还是要自信一点, 看了视频和一些教程这样写都没报错, 唯独我报错了. 一般来说大概都是环境问题, 甩锅给Vue-CLI