使用maven結合requirejs管理前端腳本

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

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

1、使用requirejs作模塊依賴管理。

敘述下前提摘要

一、爲何使用requirejs

項目愈來愈大，前端愈來愈重要，代碼愈來愈多，缺少有效的管理。因而關注到業內的AMD規範。

AMD規範全稱是Asynchronous Module Definition，即異步模塊加載機制，完整描述了模塊的定義，依賴關係，引用關係以及加載機制，requirejs是該規範的一個比較好的實現，因而……採用

二、如何使用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這一點

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

【注】exec插件的調用命令mvn exec:exec

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

 

一、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

 

完了？沒完

二、上面的東東你們學習下也就都會了，問題是如何最終發佈。壓縮合並咱們最終考慮的是前端性能，那麼在前段展現時須要考慮另一個就是依賴庫的加載性能。

規則：

• 必定得作合併，工程爲了清晰咱們代碼很分散，不合並前端得加載20+js
• lib庫千萬不要合併到本身的業務庫中
• 重複的庫提取重複部分

 

這個和上面的工程分割有關聯，你們看的過程當中能夠翻回去看看

對比下多種方案

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

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

1. 若是是對外提供的相似SDK庫，那就把全部的js文件壓縮成爲一個，相似jquery.js

前端SDK開發者，很少說什麼，吧大家須要總體對外提供的東東打一個包

1. 若是是上面二者的過渡體（常態）

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

其餘東東很差說，業務太複雜，不能妄論。

 

三、針對上面3）,如何提供本身的subLib庫，不被合併到最終的view.js中，又能將分散的多文件合併到一塊兒呢。

 

module中，定義本身的模塊，而後再view中排除掉

完了，真的完了

3、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)