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插件來支撐哦~