從mpvue1.x升級到mpvue2.x之後排錯之後的一些總結

mac就是我發表於2019-04-14

問題是這樣的,我從mpvue1.x升級到mpvue2.x之後,經歷了很多報錯,但是都一一解決了,這次的錯誤在後臺編譯的時候沒有任何錯誤,但是在前端console中出現下面的報錯情況

見到這種錯誤,我想當然的認為我是找不到問題的,就直接用Google去搜尋報錯資訊

 TypeError: Cannot read property 'prototype' of undefined mpvue
複製程式碼

wxs真的很難用 作為頁面的指令碼語言,微信這邊自己現成的JS不用,自己搞了一套嵌入式指令碼語言,裡面只能寫ES3的語法不說(還不是完整版的ES3語法)沒有 Array, Object 物件;或遇到引入 lodash 會報錯 TypeError: Cannot read property ‘prototype’ of undefined

小程式開發遇到的一些問題和吐槽

我搜到了這個文件其實,這個文件已經夠說明問題了,但是我覺得我這個不應該是lodash 的問題,因為我在mpvue1.x的時候用的好好的,升級之後也不可能出現問題,這是我當時的想法,我直接排除這個錯誤,連去嘗試都沒有直接排除了

接下來我做的一些努力(無效努力)

  1. 找到一個已經升級mpvue2.x的專案,去尋找package.json 之間的區別
  2. 反覆去比對兩個專案之間的區別
  3. 把所有依賴包都調成一樣的版本
  4. 懷疑是引入的某些外部元件的問題(開始亂猜了)
  5. 埋怨自己為什麼升級的時候不另外新建一個分支(後悔升級了,開始感情化處理了)
  6. 反問自己,總想著從側面去解決問題(使用Google搜尋其他人遇到同樣的問題),為什麼不從正面去做嘗試,難道是因為正面尋找問題太麻煩了嗎?

正面解決問題確實稍微麻煩些(被webpack編譯過了),但是這個問題已經耽擱了自己太長的時間,有這些時間,早就從正面突破了,

最終突破困境(正面突破):

  1. 找到距離報錯資訊最近的自己的檔案(這裡有一個前提就是第三方庫都是反覆測試過的,確定沒有問題的,出錯的地方也只有自己的程式碼)這裡很顯然是,(http://127.0.0.1:53887/appservice/pages/index/main.js:276:68)這一行
  2. 點選去看看報錯位置是哪行程式碼(點進去看了一眼,就知道問題了,還是那個lodash)
  3. 找到對應的編譯之前的檔案,將出錯的地方註釋
  4. 再次編譯執行,解決問題

從mpvue1.x升級到mpvue2.x之後排錯之後的一些總結

總結:

  1. 如果有多個錯誤的話,找第一個報錯(後面的報錯都是因為第一個報錯而報錯的)
  2. 逐字逐句閱讀報錯資訊(嘗試去理解)
  3. Google錯誤的時候加上使用技術棧的名稱(這裡是mpvue)
  4. 找到其他人使用時有相同錯誤記錄的時候,一定要注意(記錄下可疑的報錯位置,特別是自己也是用了相同的庫)
  5. 從報錯資訊正面除錯,找到位置

排錯的步驟(抽象一下):

  1. 定位 (定位錯誤程式碼的位置,閱讀報錯資訊,使用Google,正面檢查)
  2. 替換(註釋掉)
  3. 執行

這個錯誤耽擱了我將近8個小時的時間

從mpvue1.x升級到mpvue2.x之後排錯之後的一些總結

相關文章