[新手坑] 03.Vue-CLI用ES6編碼仍須要手動裝置一些Babel插件

2023年3月22日 219次阅读 来源: whidy

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

    原文作者：whidy
    原文地址: https://segmentfault.com/a/1190000014678534
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞