使用maven結合requirejs管理前端指令碼

標籤：命令   bootstrap   技術分享   壓縮   準備   頁面   統一   ejs   jquer   

已有的web項目，一直使用Maven做工程管理，現階段前端調整為使用requirejs來負責模組載入依賴，同時使用jasmine來完成前端的UT。

便與在maven下統一管理，簡單整理了下合在一起的使用，Maven,require,jasmine三者技術細節子去google

一、使用requirejs做模組依賴管理。

敘述下前提摘要

1、為什麼使用requirejs

項目越來越大，前端越來越重要，代碼越來越多，缺乏有效管理。於是關注到業內的AMD規範。

AMD規範全稱是Asynchronous Module Definition，即非同步模組載入機制，完整描述了模組的定義，依賴關係，參考關聯性以及載入機制，requirejs是該規範的一個比較厚的實現，於是……採用

2、如何使用requirejs

define,require等文法不必多說，參考API文檔http://www.requirejs.cn/

 

這裡其實還得說回前端代碼的結構劃分，依據我們已有的工程代碼，簡單整理了如下結構，希望對大家有用。

 

 

前端按照後端領域模型開發的方式，同時有針對性的提出UI庫，模板庫劃分

Lib	依賴庫
Basic	基礎，設計命名空間、版本定義、BaseType定義等。
Model	模型對象，類似背景bean
onepiecework	商務邏輯庫，可以存放統一複雜商務邏輯在前端的調用，處理代碼。
UI	前端UI庫 商務邏輯的服務大家都比較認同，但是關於UI，大家總覺得太low，或者有細節差異等等。但是，建議千萬不要到處複製粘貼，如果相似，抽取公用部分，這個位置就是專為此準備的）
view	最終與html打交道的js指令碼，control層
Commonjs	requireConfig檔案，提供全域載入路徑、lib庫等的管理

 

測試目錄對照開發目錄，清晰（喜歡maven這一點

二、使用maven來處理對requirejs工程的混淆和編譯打包

【注】exec外掛程式的調用命令mvn exec:exec

代碼壓縮混淆會影響到UT,建議在最終打包時調用，當前工程定義混淆專屬的profile，需要在測試執行時-P指定，完整命令為 mvn exec:exec -PjsCompile

 

1、r.js，熟悉requirejs的大夥對此肯定不生疏。

使用思路很簡單，在maven中配置exec-maven-plugin 外掛程式來調用本地編寫好的bat命名，命令很簡單，核心就一句。可以參考build目錄下的build.bat

node r.js -o buildConfig.js

 

buildConfig.js, 壓縮混淆配置，制定對js代碼進行壓縮，合并的規則。

細節API依舊不說，參考這http://www.yfznw.com/node/22

 

完了？沒完

2、上面的東東大家學習下也就都會了，問題是如何最終發布。壓縮合并我們最終考慮的是前端效能，那麼在前段展示時需要考慮另外一個就是依賴庫的載入效能。

規則：

• 一定得做合并，工程為了清晰我們代碼很分散，不合并前端得載入20+js
• lib庫千萬不要合并到自己的業務庫中
• 重複的庫提取重複部分

 

這個和上面的工程分割有關聯，大家看的過程中可以翻回去看看

對比下多種方案

1. 針對最終的每個view,提供除了lib庫依賴的獨立js

頁面相互獨立，比較少有公用邏輯，那就這麼幹

1. 如果是對外提供的類似SDK庫，那就把所有的js檔案壓縮成為一個，類似jquery.js

前端SDK開發人員，不多說什麼，吧你們需要整體對外提供的東東打一個包

1. 如果是上面兩者的過渡體（常態）

• 建議按照硬結構，先提取Basic和Util模組，合并
• 軟結構（業務功能），相關聯業務模組合并壓縮到一起。
• UI庫最好獨立打成一個lib，太大的話按照UIKu類型分割，類似bootstrap的外掛程式劃分哪種方式

其他東東不好說，業務太複雜，不能妄論。

 

3、針對上面3）,如何提供自己的subLib庫，不被合并到最終的view.js中，又能將分散的多檔案合并到一起呢。

 

module中，定義自己的模組，然後再view中排除掉

完了，真的完了

三、jasmine的UT測試

這裡按照官方的樣本簡單搭建了下，不值得顯擺。給個連結

http://searls.github.io/jasmine-maven-plugin/amd-support.html

範例程式碼git工程

https://github.com/searls/jasmine-maven-plugin/tree/master/src/test/resources/examples/jasmine-webapp-amd-support

 

上述樣本工程源碼提交到了oschina上( http://git.oschina.net/hansj/maven-require)

 

 

使用maven結合requirejs管理前端指令碼