FIS3+mod.js開發方案在線上部署時出現沒法找到文件的bug的解決過程

在項目中，咱們選擇了百度FIS3+MODJS+VUEJS的方案進行前端開發，這套方案具體能夠看這裏：
https://github.com/zhangtao07/fis-vuejs-seed

本地開發過程很是順利，第一次線上部署也很是順利，一切彷佛都在平穩進行着。然而在今天上午的一次更新部署之後，出現了意想不到的事情。

咱們線上更新代碼是經過把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項目，發現有這麼一個提問：
https://github.com/fex-team/mod/issues/16#issuecomment-100741125
其中關鍵的點是這一句：

mod.js 在產出的時候不是以一個完整的 loader 存在的，爲了配合 fis 的包括md五、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的緣由。從此在開發中必定要對每個環節都瞭如指掌，才能避免在知識的空白中出現問題。