Web前端構建工具版本號管理方案思考

前端構建工具滿天飛的情景下，筆者也忍不住去搗鼓了一下，真正體驗一下NODEJS帶來的魅力，經過一段時間規劃設計，終於將平臺工具搗鼓出來了。在裡面也體驗了express, socket.io, grunt等node外掛服務，使用很流暢，並且很好的完了我的基本需求（JS\CSS\IMAGE的壓縮和自動部署功能）。   


雖然基本功能完成，但是還有一個讓人容易忽略而又重要的問題來了，就是資原始檔的版本號的問題。在這裡用的是SeaJS來做的模組管理，也在網上搜集了一下關於這塊的資料。大致有以下兩種方案：


1、  配置SeaJS的map物件。很方便，集中管理，但是也存在一些問題，比如：map物件的維護、配置檔案引用頁面的時間戳問題。
2、  生成檔案sign，替換原有檔案的名。這裡不用考慮頁面引用的時間戳問題，但是需要對資源及頁面做一次全文查詢替換，這對於分散部署的情況下將會非常複雜。
看了上面兩種方案後，感覺在我的場景下還存在一些不足之處。筆者想要的是不影響開發情況下，開發人員完全不用考慮檔案被快取問題，只需完成編碼，提交到構建系統後，一鍵完成構建和部署。


確定好目標後，既然不想讓開發同學關心時間戳問題，那麼是否可以將這個工作交給Web伺服器來做呢？那麼交給伺服器來做之後，如何動態的更新最新的資原始檔呢？


有問題就好解決，將問題丟擲來之後，方案也漸進呈現出來，不囉嗦了，直接上筆者的實現方案：


構建工具動態生成.htaccess檔案，將構建的資原始檔的URL重寫列表同步到.htaccess檔案中以達到由伺服器動態獲取新的資原始檔。


（備註：筆者是在apache環境下，對IIS\NGINX\TOMCAT\RESIN\JBOSS等環境還需要再研究研究。）


看了上面的方案是不是很簡單，那具體是怎麼做的呢？筆者也在這裡列一下。


1. 構建工具在構的時候生成一個與filename.ext對應的filename.ext.sha1的檔案，這個.sha1的檔案存放filename.ext檔案的sha1值。


2. 在構建完成後，構建工具讀取.htaccess的模板，並且遍歷得到所有資原始檔的列表，生成一個對filename.ext對應的filename.ext.sign的檔案。


3. 按規則生成RewriteCond和RewriteRule。並將規則資料寫到.htaccess檔案中並部署到資原始檔站點的根據目錄。


Web前端開發 前端開發工具 NodeJS


圖一：構建工具基本結構圖


Web前端開發 前端開發工具 NodeJS


圖二：構建後的檔案列表


Web前端開發 前端開發工具 NodeJS


圖三：生成一條Rule


Web前端開發 前端開發工具 NodeJS


圖四：生成後的.htaccess檔案


OK，到這裡基本告一段落了，資源版本號解決了。但是對於效能影響這塊還需要觀察，待有時間再研究。