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

这五一几天, 没什么事情, 想着再深入研究下

Vuex, 然后又找了些教程, 结合官方文档研究. 却遇到了一个坑爹的问题...

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

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

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

问题现象

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

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

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

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

问题原因

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

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

解决方案

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

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?... 开玩笑的. 因此, 在Vue-CLI构建的项目中, 使用ES6编码的时候如果出现奇怪的报错, 可能还需要其他Babel插件来支持哦~