Package.js 現(xiàn)代化的JavaScript項目make工具

更新時間：2012年05月23日 19:25:35 作者：

Package.js是一個很方便的JavaScript包依賴管理及Make工具。它的設計目標是使瀏覽器端的JavaScript Component/App 開發(fā)更加模塊化

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

Package.js是一個很方便的JavaScript包依賴管理及Make工具。它的設計目標是使瀏覽器端的JavaScript Component/App 開發(fā)更加模塊化。如果您只是在開發(fā)一個小型的網(wǎng)站，只會混雜在HTML中寫幾行JS代碼用于改善一下用戶體驗，那么Package.js也許并不適合您。如果您正在開發(fā)一個中到大型的WebApp，有幾十甚至幾百幾千個JS文件和CSS文件、HTML模板文件，如果您正在為管理這些JS模塊之間的依賴和加載而煩惱，為發(fā)布到生產環(huán)境時將JS文件合并打包而寫Makefile寫得頭暈，那么，Package.js，這就是你想要的！趕快來了解并使用Package.js吧！

Package.js主要包含兩個部分

運行在瀏覽器中的，用于define及import模塊的JS庫API
運行在node.js環(huán)境，將所有JS包及其依賴的CSS及HTML文件合并的make工具

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

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

復制代碼代碼如下:

 
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代碼：

復制代碼代碼如下:

 
Package.define("Root.ui.Button",["Root.ui.Pane","Root.util.Tpl","Root.util.Event"], 
function (Pane,Tpl,Event) { 
//Pane為Root.ui.Pane 
//Tpl對應Root.util.Tpl 
//依此類推 
//..... 
}); 

與CommonJS的AMD規(guī)范不同，在Package.js的語法中，一個JS模塊，不但可以依賴其它JS包，還可以依賴CSS及HTML模板文件、及其它的JSON數(shù)據(jù)文件，并在運行時，獲取到依賴的其它文件的內容。定義語法如下：

復制代碼代碼如下:

 
Package.define("NS.ui.Button",["MT.ui.Component"], 
{ 
tpl:"tpl.html", 
_style:"style.css" 
},function (Component) { 
//通過this.assets.tpl訪問tpl.html內容 
var bgImgUrl=this.path+"img/bg.png",tpl=this.assets.tpl; 
function Button(opt) { 
//也可以通過當前Package對象的_pkgMeta_屬性訪問assets 
this.tpl=String2Dom(opt.tpl || Button._pkgMeta_.assets.tpl); 
} 
return Button; 
}) 

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

復制代碼代碼如下:

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

在開發(fā)時，為了模塊化，您需要將JS分成一個一個小的模塊文件，但發(fā)布到生產環(huán)境時，為了加載速度上的考慮，您需要將這些JS文件合并成單個的JS文件并壓縮，同樣，CSS文件也要合并到一起。

復制代碼代碼如下:

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

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

復制代碼代碼如下:

 
#執(zhí)行命令 
build.js build-config.json js all.min.js 
build.js build-config.json css all.min.css 
#腰不酸了，腿不疼了！ 

引用

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

Package.js相比于其它模塊加載器及AMD實現(xiàn)（RequireJS，SeaJS...）有什么優(yōu)勢或缺點？

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

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

好！不要再用落后的方式開發(fā)JavaScript App，不要再做Out Man，趕快使用Package.js吧 ^O^

您可能感興趣的文章: