禪與 NPM 維修的藝術

這兩天我拿了一個從 TypeScript 編譯後,又經過 webpack 壓縮過的 JavaScript 檔案,到一個比較老舊版本的 node 環境(node 6)上面執行。一跑下去,出錯。

Node 直接跳出 syntax error 語法錯誤,錯誤訊息則是遇到了不認識的 token 也就是,這份編譯打包過的 JavaScript 中,包含了老舊版本 node 不支援的新語法。

遇到這的錯誤的當下我束手無策。那個編譯過的 JavaScript 裡頭只有一行,但是在那一行當中總共有 8k 個字元,光憑編輯器與肉眼,根本不可能看出(或是不可能想去看)是什麼地方出了錯。光憑印象把把 TypeScript 與 Webpack 的設定改了改,要求輸出成 ES5 時代的語法,沒用。

2026 年遇到問題直接先找 AI 可能已經是起手勢,AI 先跳下去看那個 8k 大小的檔案,鎖定了問題不在我自己的程式中,而是一個外部 depedency,這個外部套件用了非常新的語法,而且我所做的 Webpack 設定並不會套用到這個外部 dependency 上。AI 給的建議是除了 TSC 與 Webpack 外,我還需要再加上 Babel,讓 Babel 把所有的程式都轉成 ES5 語法。

再跑一次,syntax error 消失了,取而代之的是一個 runtime error,錯誤是那個 dependency 用了新版的 RegEx 的語法,在轉譯過程中,導致出現了沒有初始化的變數名稱。既然都用上 AI,那就繼續用到底 — AI 就自己多加了一段 poly-fill,拿一段呼叫舊版 RegEx 的函式,把那段用上新版 RegEx 的部分換掉。好了,終於可以跑起來。

這在沒有 AI 之前,光是要鎖定問題是出在哪個部分 — 自己的程式、打包設定,還是其他 dependency — 對人類來說就十分困難。人類的慣性就是先去看自己熟悉、能夠掌握的部分,比起去看整個打包過的 webpack 以及別人寫的 dependency 那些超過腦力負荷的地方,還是會先去看自己寫的部分,問題其實不在那個地方,但人類的選擇就是會在那消磨時間。你明知道問題也可能會在舒適圈之外,但舒適圈之外,只有滿滿的不舒適。

解決問題的那瞬間,我是那麼強大,又是那麼無力。

Continue reading