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