記一次debug過程

對個人debug的一次回顧，沒啥乾貨

背景

前幾天部門來了個新人，接手了一個我沒參與過的老專案，專案麼就是一個普通的vue腳手架起的專案，但是裝完依賴後卻跑不起來，便求助於我。

開始

先看下報錯資訊：

error in ./node_modules/vconsole/dist/vconsole.min.js

Module parse failed: Unexpected token (10:79312).You may need an appropriate loader to handle this file type.

看到報錯資訊我直觀的認為是webpack設定問題，直接就開始google大法了，簡單的搜尋和嘗試之後無果，且自身對webpack也不甚熟悉。

隨後換了一個方向：因為是老專案，程式碼有一段時間沒有改過了，為何突然跑不起來？報錯的是vconsole，是不是它出了問題？

手動安裝了老闆本，無報錯。基本鎖定是新版本的問題，檢視vconsolepackage.json歷史commit，新版引入了新依賴copy-text-to-clipboard以及一些babel外掛更新。看了下copy-text-to-clipboard原始碼，就一個js檔案，沒發現有啥特殊。

折騰了一番後陷入了僵局。。。

隨後抱著嘗試的心態在報錯檔案中去定位具體程式碼（正常情況下這一步應該第一時間去做，但是這是一個壓縮後的js檔案，直覺告訴我看了也沒用...），發現報錯的程式碼類似：

try{}catch{}

嗯？catch後面未攜帶引數？搜了下發現是es2019的提案，babel7已經支援。而公司的專案用的是babel6+

哦～原來如此！接下來就簡單了，有2種解決方式：

降級vconsole，畢竟新版沒有什麼我特別想要的功能
升級專案的babel依賴，看了下Babel升級檔案，有一些望而卻步...

那就用方法1吧。呵！又一個「難題」被我解決了，又是枯燥的一天（狗頭

....

不對！vconsole.min.js已經經過一次打包了，為什麼還會出現如此「高階」的程式碼？vconsole專案用的也正是babel7+

克隆一波原始碼，本地編譯了一下。發現打出的包與npm上的一致（廢話）

而根據.babelrc檔案可知，專案用的是@babel/preset-env，檔案上也說@babel/preset-env已經包含了@babel/plugin-proposal-optional-catch-binding。通過Babel線上驗證了一波，編譯出的程式碼確實符合預期：

// before
try {} catch{}

// after
try {} catch (_unused) {}

一番嘗試摸索後發現，直接在webpack中設定babel-loader相關options是有效果的，而修改.babelrc則無效。也確實有搜到有人說babelrc檔案設定無效，興許是babel的bug？

隨後便順手給vconsole提了一個PR。本質就是載入.babelrc檔案，解析成js物件，最後手動將該物件作為babel-loader的options。PR很快得到了回覆以及合併。

事情到這裡差不多就結束了。但是.babelrc無用這個問題讓我感到很不解，Babel那麼大的大哥，會出現這種問題嗎？

又翻了翻Babel檔案，才發現不是babelrc無用，是用！錯！了！（捂臉

細節可以看檔案，簡單來說就是babel.config.json對應專案級別的設定；.babelrc對應檔案級別，且需要設定filename才能起作用。

所以正確又優雅的修改方式應該是直接將.babelrc檔案重新命名為babel.config.json

背景

開始

完。