問題是這樣的,我從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的時候用的好好的,升級之後也不可能出現問題,這是我當時的想法,我直接排除這個錯誤,連去嘗試都沒有直接排除了
接下來我做的一些努力(無效努力)
- 找到一個已經升級mpvue2.x的專案,去尋找package.json 之間的區別
- 反覆去比對兩個專案之間的區別
- 把所有依賴包都調成一樣的版本
- 懷疑是引入的某些外部元件的問題(開始亂猜了)
- 埋怨自己為什麼升級的時候不另外新建一個分支(後悔升級了,開始感情化處理了)
- 反問自己,總想著從側面去解決問題(使用Google搜尋其他人遇到同樣的問題),為什麼不從正面去做嘗試,難道是因為正面尋找問題太麻煩了嗎?
正面解決問題確實稍微麻煩些(被webpack編譯過了),但是這個問題已經耽擱了自己太長的時間,有這些時間,早就從正面突破了,
最終突破困境(正面突破):
- 找到距離報錯資訊最近的自己的檔案(這裡有一個前提就是第三方庫都是反覆測試過的,確定沒有問題的,出錯的地方也只有自己的程式碼)這裡很顯然是,(http://127.0.0.1:53887/appservice/pages/index/main.js:276:68)這一行
- 點選去看看報錯位置是哪行程式碼(點進去看了一眼,就知道問題了,還是那個lodash)
- 找到對應的編譯之前的檔案,將出錯的地方註釋
- 再次編譯執行,解決問題
總結:
- 如果有多個錯誤的話,找第一個報錯(後面的報錯都是因為第一個報錯而報錯的)
- 逐字逐句閱讀報錯資訊(嘗試去理解)
- Google錯誤的時候加上使用技術棧的名稱(這裡是mpvue)
- 找到其他人使用時有相同錯誤記錄的時候,一定要注意(記錄下可疑的報錯位置,特別是自己也是用了相同的庫)
- 從報錯資訊正面除錯,找到位置
排錯的步驟(抽象一下):
- 定位 (定位錯誤程式碼的位置,閱讀報錯資訊,使用Google,正面檢查)
- 替換(註釋掉)
- 執行
這個錯誤耽擱了我將近8個小時的時間