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

lwx12525 發布于2019-08-26 11:52 / 2885人閱讀

摘要：用編碼仍需要手動安裝一些插件這五一幾天沒什么事情想著再深入研究下然后又找了些教程結合官方文檔研究卻遇到了一個坑爹的問題在安裝完成后如果需要用到一些語法編寫代碼有時候報錯的話可能是缺少編譯插件比如我在看文檔和部分教程的時候有類似這樣的代碼

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

GPU云服務器云服務器配置阿里云window服務器的一些坑手動安裝nodejs java手動安裝 lnmp手動安裝步驟

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107713.html

Next.js踩坑入門系列（二）— 添加Antd && CSS

摘要：踩坑入門系列一二添加三目錄重構再談路由陸續更新個人對于腳手架的有一種執念，如果搭建出來就是一個首頁標簽跳轉，實在不是我這個處女座的風格，因此第二步我就想引用框架，相信很多使用的開發者用的也都是這個框架吧。 Next.js踩坑入門系列 (一) Hello Next.js (二) 添加Antd && CSS (三) 目錄重構&&再談路由陸續更新... 個人對于腳手架的UI有一種執...

lifesimple 2019-08-23 11:38 評論0 收藏0
使用webpack和babel搭建react開發環境

摘要：譯文原文來自寫在前面使用已經蠻長一段時間但是在新項目開始之際都是東拼西湊其他項目的配置來使用如果要自己從零開始寫一個完整項目的配置估計得費死勁所以在發布版本之際正是時候來認真從零開始學習了是一個出自的庫用于構建用戶交互界面是一個非常厲害的有譯文,原文來自https://scotch.io/tutorials/s...寫在前面,使用webpack已經蠻長一段時間,但是在新項目開始之際,...

AZmake 2019-08-20 15:58 評論0 收藏0
在 React-CRA 應用中配合 VSCode 使用 ESLint 實踐前端代碼規范

摘要：編碼規范是獨角獸公司內部的編碼規范，該項目是上很受歡迎的一個開源項目，在前端開發中使用廣泛，本文的配置規則就是以編碼規范和編碼規范作為基礎的。更新時間：2019-01-22React.js create-react-app 項目 + VSCode 編輯器 + ESLint 代碼檢查工具 + Airbnb 編碼規范前言為什么要使用 ESLint 在項目開發過程中，編寫符合團隊編碼規...

Hujiawei 2019-08-23 14:55 評論0 收藏0
一份關于webpack2和模塊打包的新手指南

摘要：使用讓從打包文件中刪除未使用的導出項以減少文件大小。最后，用以下內容替換的部分在命令行中運行將以監視模式啟動，當目錄中的文件更改時，它將重新編譯。這種轉換涉及三個單獨的加載器和庫在配置文件中為文件添加新規則。 webpack已成為現代Web開發中最重要的工具之一。它是一個用于JavaScript的模塊打包工具，但是它也可以轉換所有的前端資源，例如HTML和CSS，甚至是圖片。它可以讓你...

tianren124 2019-08-20 18:34 評論0 收藏0
配置React開發環境教程

摘要：這是一篇新手向文章，主要是記錄一下使用過程，希望能給予別人一些幫助和提示用做包管理用做和語法編譯器做模塊管理和打包教程是基于的，得提前安裝好。這是一篇新手向文章，主要是記錄一下使用過程，希望能給予別人一些幫助和提示用 Yarn 做包管理用 Babel 做jsx和es6語法編譯器Webpack 做模塊管理和打包教程是基于macOS的，Nodejs得提前安裝好。我的Nodejs和np...

explorer_ddf 2019-08-20 14:34 評論0 收藏0