FIS3+mod.js開發方案在線上部署時出現無法找到檔案的bug的解決過程
寫於 2016.01.08
在專案中，我們選擇了百度FIS3+MODJS+VUEJS的方案進行前端開發，這套方案具體可以看這裡：ofollow,noindex">github.com/zhangtao07/…
本地開發過程非常順利，第一次線上部署也非常順利，一切似乎都在平穩進行著。然而在今天上午的一次更新部署以後，出現了意想不到的事情。
我們線上更新程式碼是通過把fis3 release出來的檔案放入伺服器檔案目錄內，再重啟伺服器的方式進行的。在之前的多次修改中都沒有出現問題，但是在今天上午，我把兩個新寫的js檔案新增到伺服器檔案目錄內，按照以往的更新方式進行後，發現控制檯報錯，錯誤原因是mod.js無法找到對應的js檔案。
專案使用的是非同步載入的方式，什麼時候需要這個js就直接把它require進來。今天上午的bug就是出現在這裡，新新增的兩個js檔案竟然require不出來了。
首先我仔細檢查了檔案的引用路徑，和能夠成功載入的檔案的寫法是一模一樣的，排除了檔案路徑的問題； 接著對其他頁面進行debug，因為之前也試過如果上一個頁面報錯，會影響這個頁面的進行。排除其他頁面的錯誤之後，問題依然存在。 開啟chrome控制檯，在network裡面監視檔案請求，發現require路徑報404錯誤，並且發現其content-type為text，而非正常的javascript，同時同事無意中的一句吐槽也引起了我的注意：“很奇怪呀，第一次部署上去的都可以，修改裡面的程式碼也沒問題，但是把檔案改個名字或者新增新的檔案就出問題了。”
通過仔細分析，認為這個bug並未由寫錯路徑之類的低階錯誤引起的，而是在FIS3編譯過程中出現問題或者mod.js進行檔案引用的過程中出現問題引起的。
帶著這個想法，我首先研究了一下FIS3的config檔案，沒有找到關鍵點。初步排除是FIS3編譯的問題。 接著在github上，找到百度fex-team所在的mod.js專案，發現有這麼一個提問：github.com/fex-team/mo… 其中關鍵的點是這一句：
mod.js 在產出的時候不是以一個完整的 loader 存在的，為了配合 fis 的包括md5、cdn等等功能，需要在載入使用時，給 mod.js 一個靜態資源列表
我想我找到了原因。
mod.js並非直接通過寫在require('xxxxx')
的方式引入檔案，而是通過一張靜態資源列表所獲得。如果這張表沒有記錄這個路徑，那麼mod.js是不可能把資源載入進來的。
這個列表是由後端通過查詢 fis 產出的靜態資源列表 map.json 得到的。 也就是說，這個表應該是在我FIS3的產出目錄或者產出檔案中。後開啟伺服器目錄，找到對應檔案，真的發現有著這麼一份靜態資源列表：
require.resourceMap({
"res": {
"project/component/xxx/xx": {
"url": "/project/component/xxx/xx.js",
"type": "js"
},
"pkg":[]
});
複製程式碼
問題終於明瞭。原來是我們只顧著新增新的檔案，更新資源的引用路徑，卻沒有更新這份靜態資源列表！所以才會出現第一次部署成功，但是修改檔名或者新增加檔案的時候出現bug（因為這份靜態資源列表存放在一個幾乎不用更改的檔案內，所以線上部署的時候這個檔案依然是沿用著舊版）。 馬上給這份靜態資源列表進行更新，部署，重啟伺服器，測試…… 測試通過。 bug終於解決！！
後來仔細回想，其實這也算是低階錯誤，因為竟然遺漏了部署前對檔案內容進行對比的步驟。對構建工具的編譯流程的不熟悉，對模組載入器載入原理的不瞭解也是造成bug的原因。今後在開發中一定要對每一個環節都瞭如指掌，才能避免在知識的空白中出現問題。