記一次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種解決方式：

1. 降級vconsole，畢竟新版沒有什麼我特別想要的功能
2. 升級項目的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

完。