現代化的JavaScript項目make工具：Package.js

http://www.cnblogs.com/jamcode/archive/2012/05/23/javascript-package-js.html

Package.js項目地址：http://code.google.com/p/package-js/

做者博客：jex.im Package.js是一個很方便的JavaScript包依賴管理及Make工具。它的設計目標是使瀏覽器端的JavaScript Component/App 開發更加模塊化。若是您只是在開發一個小型的網站，只會混雜在HTML中寫幾行JS代碼用於改善一下用戶體驗，那麼Package.js也許並不適合您。若是您正在開發一箇中到大型的WebApp，有幾十甚至幾百幾千個JS文件和CSS文件、HTML模板文件，若是您正在爲管理這些JS模塊之間的依賴和加載而煩惱，爲發佈到生產環境時將JS文件合併打包而寫Makefile寫得頭暈，那麼，Package.js，這就是你想要的！趕快來了解並使用Package.js吧！

Package.js主要包含兩個部分

運行在瀏覽器中的，用於define及import模塊的JS庫API 運行在node.js環境，將全部JS包及其依賴的CSS及HTML文件合併的make工具

Package.js瀏覽器端的API參照了CommonJS/AMD規範，兼容此規範的最簡單形式，並在此基礎擴展了一些語法，以便於開發包含CSS及HTML模板的JavaScript UI組件。

直接來看一下使用Package.js開發的項目的目錄結構吧，簡單明瞭：

? Test ├── dom │ └── Style.js #命名空間爲Test.dom.Style的模塊文件 ├── init.js #根命名空間初始化文件 ├── nsconf.js #Package.js會讀取的配置文件 ├── ui │ ├── Button │ │ ├── img │ │ │ └── bg.png │ │ ├── init.js #Test.ui.Button命名空間的模塊文件 │ │ ├── style.css #UI組件的CSS文件 │ │ └── tpl.html #UI組件的HTML模板文件 │ └── Form │ ├── init.js │ ├── style.css │ └── tpl.html ├── util │ └── Cookie.js #命名空間爲Test.util.Cookie的JS包 └── xproxy.html -> ../Package/xproxy.html #此文件爲Soft Link指向Package.js源碼中的Package/xproxy.html，用於跨域加載HTML模板文件 　　

使用Package.js，模塊的定義語法—— Root/ui/Button/init.js代碼：

1 Package.define("Root.ui.Button",["Root.ui.Pane","Root.util.Tpl","Root.util.Event"], 2 function (Pane,Tpl,Event) { 3 //Pane爲Root.ui.Pane 4 //Tpl對應Root.util.Tpl 5 //依此類推 6 //..... 7 });

與CommonJS的AMD規範不一樣，在Package.js的語法中，一個JS模塊，不但能夠依賴其它JS包，還能夠依賴CSS及HTML模板文件、及其它的JSON數據文件，並在運行時，獲取到依賴的其它文件的內容。定義語法以下：

1 Package.define("NS.ui.Button",["MT.ui.Component"], 2 { 3 tpl:"tpl.html", 4 _style:"style.css" 5 },function (Component) { 6 //經過this.assets.tpl訪問tpl.html內容 7 var bgImgUrl=this.path+"img/bg.png",tpl=this.assets.tpl; 8 function Button(opt) { 9 //也能夠經過當前Package對象的_pkgMeta_屬性訪問assets 10 this.tpl=String2Dom(opt.tpl || Button.pkgMeta.assets.tpl); 11 } 12 return Button; 13 })

在瀏覽器中，可使用下面的方法導入一個JS模塊， 在導入的過程當中，Package.js自動幫您作了後勤工做：一、加載這個模塊的依賴模塊。二、加載依賴的HTML及CSS文件。

1 Package.imports(["Root.ui.Button"],function (Button) { 2 var btn=new Button(); 3 btn.renderTo(document.body); 4 });

在開發時，爲了模塊化，您須要將JS分紅一個一個小的模塊文件，但發佈到生產環境時，爲了加載速度上的考慮，您須要將這些JS文件合併成單個的JS文件並壓縮，一樣，CSS文件也要合併到一塊兒。

1 //您的打包配置文件 2 //build-config.json文件內容 3 { 4 "staticUrls": {"defaults":"http://statics.iwt.macrotarget.com/jslibs/"}, 5 "nsconfs":["http://www.cnblogs.com/statics/jslibs/XLib/nsconf.js"], 6 "includes":["XLib.apps.MainApp","XLib.ui.*"], 7 "compress":true //使用UglifyJS和UglifyCSS進行壓縮 8 }

藉助Package.js，完成這個功能，您只須要寫三四行JSON配置代碼，執行一個命令，就一切OK了。

1 #執行命令 2 build.js build-config.json js all.min.js 3 build.js build-config.json css all.min.css 4 #腰不酸了，腿不疼了！

引用

PS：build.js還幫您作掉一個小事：將CSS文件中的background:url()之類的相對路徑轉換成絕對URL。您在開發時，CSS中url()始終只須要寫相對路徑，在部署到生產環境時，build.js合併後的CSS會自動將其轉換成絕對URL。甚至，若是你有使用IE6 Png AlphaImageLoader濾鏡，使用wui4ie6的loader,您在開發時仍然能夠在src=裏寫相對路徑，在開發模式下，Package.js也會自動生成使用絕對URL的CSS Rule，在打包時也會對 AlphaImageLoader的src做轉換，CSS中永遠不須要寫絕對URL

Package.js相比於其它模塊加載器及AMD實現（RequireJS，SeaJS...）有什麼優點或缺點？

Package.js是面向Web App Framework開發，定義語法及文件目錄結構較嚴格（或者說稍顯複雜）,只使用AMD規範中最簡單的一種define語法 Package.js將JS模塊對CSS及HTML文件的依賴與對其它JS模塊的依賴在define寫法上區分開來，而且在build.js中也包含了對CSS、HTML、JSON打包的處理 （TOT）包含對IE6 CSS的特殊照顧（沒辦法，咱們本身的項目須要） 增長PackageMeta,一個JS模塊在運行時能夠知道本身的URL ...若是算缺點的話：不與CommonJS AMD規範徹底兼容 build時支持三種導出模式：includes,deps,all 開發模式下更方便：使用_xproxy_.html跨域加載，無需代理。使用_nsconf_.js，無需配置paths。

聽完這些簡單的介紹或許您對Package.js已經躍躍欲試了，在使用以前，您能夠參考下 Package.js的詳細文檔:http://package-js.googlecode.com/hg/docs/Package.html。

好！不要再用落後的方式開發JavaScript App，不要再作Out Man，趕快使用Package.js吧 ^O^