Package.js 現(xiàn)代化的JavaScript項(xiàng)目make工具
更新時(shí)間：2012年05月23日 19:25:35 作者：
Package.js是一個(gè)很方便的JavaScript包依賴(lài)管理及Make工具。它的設(shè)計(jì)目標(biāo)是使瀏覽器端的JavaScript Component/App 開(kāi)發(fā)更加模塊化
Package.js項(xiàng)目地址：http://code.google.com/p/package-js/
Package.js是一個(gè)很方便的JavaScript包依賴(lài)管理及Make工具。它的設(shè)計(jì)目標(biāo)是使瀏覽器端的JavaScript Component/App 開(kāi)發(fā)更加模塊化。如果您只是在開(kāi)發(fā)一個(gè)小型的網(wǎng)站，只會(huì)混雜在HTML中寫(xiě)幾行JS代碼用于改善一下用戶(hù)體驗(yàn)，那么Package.js也許并不適合您。如果您正在開(kāi)發(fā)一個(gè)中到大型的WebApp，有幾十甚至幾百幾千個(gè)JS文件和CSS文件、HTML模板文件，如果您正在為管理這些JS模塊之間的依賴(lài)和加載而煩惱，為發(fā)布到生產(chǎn)環(huán)境時(shí)將JS文件合并打包而寫(xiě)Makefile寫(xiě)得頭暈，那么，Package.js，這就是你想要的！趕快來(lái)了解并使用Package.js吧！
Package.js主要包含兩個(gè)部分
運(yùn)行在瀏覽器中的，用于define及import模塊的JS庫(kù)API
運(yùn)行在node.js環(huán)境，將所有JS包及其依賴(lài)的CSS及HTML文件合并的make工具
Package.js瀏覽器端的API參照了CommonJS/AMD規(guī)范，兼容此規(guī)范的最簡(jiǎn)單形式，并在此基礎(chǔ)擴(kuò)展了一些語(yǔ)法，以便于開(kāi)發(fā)包含CSS及HTML模板的JavaScript UI組件。
直接來(lái)看一下使用Package.js開(kāi)發(fā)的項(xiàng)目的目錄結(jié)構(gòu)吧，簡(jiǎn)單明了：
Test
├── dom
│ └── Style.js #命名空間為T(mén)est.dom.Style的模塊文件
├── init.js #根命名空間初始化文件
├── _nsconf_.js #Package.js會(huì)讀取的配置文件
├── 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 #命名空間為T(mén)est.util.Cookie的JS包
└── _xproxy_.html -> ../Package/_xproxy_.html #此文件為Soft Link指向Package.js源碼中的Package/_xproxy_.html，用于跨域加載HTML模板文件
使用Package.js，模塊的定義語(yǔ)法——
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對(duì)應(yīng)Root.util.Tpl
//依此類(lèi)推
//.....
});
與CommonJS的AMD規(guī)范不同，在Package.js的語(yǔ)法中，一個(gè)JS模塊，不但可以依賴(lài)其它JS包，還可以依賴(lài)CSS及HTML模板文件、及其它的JSON數(shù)據(jù)文件，并在運(yùn)行時(shí)，獲取到依賴(lài)的其它文件的內(nèi)容。定義語(yǔ)法如下：
Package.define("NS.ui.Button",["MT.ui.Component"],
{
tpl:"tpl.html",
_style:"style.css"
},function (Component) {
//通過(guò)this.assets.tpl訪問(wèn)tpl.html內(nèi)容
var bgImgUrl=this.path+"img/bg.png",tpl=this.assets.tpl;
function Button(opt) {
//也可以通過(guò)當(dāng)前Package對(duì)象的_pkgMeta_屬性訪問(wèn)assets
this.tpl=String2Dom(opt.tpl || Button._pkgMeta_.assets.tpl);
}
return Button;
})
在瀏覽器中，可以使用下面的方法導(dǎo)入一個(gè)JS模塊，
在導(dǎo)入的過(guò)程中，Package.js自動(dòng)幫您做了后勤工作：1、加載這個(gè)模塊的依賴(lài)模塊。2、加載依賴(lài)的HTML及CSS文件。
Package.imports(["Root.ui.Button"],function (Button) {
var btn=new Button();
btn.renderTo(document.body);
});
在開(kāi)發(fā)時(shí)，為了模塊化，您需要將JS分成一個(gè)一個(gè)小的模塊文件，但發(fā)布到生產(chǎn)環(huán)境時(shí)，為了加載速度上的考慮，您需要將這些JS文件合并成單個(gè)的JS文件并壓縮，同樣，CSS文件也要合并到一起。
//您的打包配置文件
//build-config.json文件內(nèi)容
{
"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進(jìn)行壓縮
}
借助Package.js，完成這個(gè)功能，您只需要寫(xiě)三四行JSON配置代碼，執(zhí)行一個(gè)命令，就一切OK了。
#執(zhí)行命令
build.js build-config.json js all.min.js
build.js build-config.json css all.min.css
#腰不酸了，腿不疼了！
引用
PS：build.js還幫您做掉一個(gè)小事：將CSS文件中的background:url()之類(lèi)的相對(duì)路徑轉(zhuǎn)換成絕對(duì)URL。您在開(kāi)發(fā)時(shí)，CSS中url()始終只需要寫(xiě)相對(duì)路徑，在部署到生產(chǎn)環(huán)境時(shí)，build.js合并后的CSS會(huì)自動(dòng)將其轉(zhuǎn)換成絕對(duì)URL。甚至，如果你有使用IE6 Png AlphaImageLoader濾鏡，使用wui4ie6的loader,您在開(kāi)發(fā)時(shí)仍然可以在src=里寫(xiě)相對(duì)路徑，在開(kāi)發(fā)模式下，Package.js也會(huì)自動(dòng)生成使用絕對(duì)URL的CSS Rule，在打包時(shí)也會(huì)對(duì) AlphaImageLoader的src作轉(zhuǎn)換，CSS中永遠(yuǎn)不需要寫(xiě)絕對(duì)URL
Package.js相比于其它模塊加載器及AMD實(shí)現(xiàn)（RequireJS，SeaJS...）有什么優(yōu)勢(shì)或缺點(diǎn)？
Package.js是面向Web App Framework開(kāi)發(fā)，定義語(yǔ)法及文件目錄結(jié)構(gòu)較嚴(yán)格（或者說(shuō)稍顯復(fù)雜）,只使用AMD規(guī)范中最簡(jiǎn)單的一種define語(yǔ)法
Package.js將JS模塊對(duì)CSS及HTML文件的依賴(lài)與對(duì)其它JS模塊的依賴(lài)在define寫(xiě)法上區(qū)分開(kāi)來(lái)，并且在build.js中也包含了對(duì)CSS、HTML、JSON打包的處理
（TOT）包含對(duì)IE6 CSS的特殊照顧（沒(méi)辦法，我們自己的項(xiàng)目需要）
增加PackageMeta,一個(gè)JS模塊在運(yùn)行時(shí)可以知道自己的URL
...如果算缺點(diǎn)的話：不與CommonJS AMD規(guī)范完全兼容
build時(shí)支持三種導(dǎo)出模式：includes,deps,all
開(kāi)發(fā)模式下更方便：使用_xproxy_.html跨域加載，無(wú)需代理。使用_nsconf_.js，無(wú)需配置paths。
聽(tīng)完這些簡(jiǎn)單的介紹或許您對(duì)Package.js已經(jīng)躍躍欲試了，在使用之前，您可以參考下
Package.js的詳細(xì)文檔:http://package-js.googlecode.com/hg/docs/Package.html。
好！不要再用落后的方式開(kāi)發(fā)JavaScript App，不要再做Out Man，趕快使用Package.js吧 ^O^
Package.js是一個(gè)很方便的JavaScript包依賴(lài)管理及Make工具。它的設(shè)計(jì)目標(biāo)是使瀏覽器端的JavaScript Component/App 開(kāi)發(fā)更加模塊化。如果您只是在開(kāi)發(fā)一個(gè)小型的網(wǎng)站，只會(huì)混雜在HTML中寫(xiě)幾行JS代碼用于改善一下用戶(hù)體驗(yàn)，那么Package.js也許并不適合您。如果您正在開(kāi)發(fā)一個(gè)中到大型的WebApp，有幾十甚至幾百幾千個(gè)JS文件和CSS文件、HTML模板文件，如果您正在為管理這些JS模塊之間的依賴(lài)和加載而煩惱，為發(fā)布到生產(chǎn)環(huán)境時(shí)將JS文件合并打包而寫(xiě)Makefile寫(xiě)得頭暈，那么，Package.js，這就是你想要的！趕快來(lái)了解并使用Package.js吧！
Package.js主要包含兩個(gè)部分
運(yùn)行在瀏覽器中的，用于define及import模塊的JS庫(kù)API
運(yùn)行在node.js環(huán)境，將所有JS包及其依賴(lài)的CSS及HTML文件合并的make工具
Package.js瀏覽器端的API參照了CommonJS/AMD規(guī)范，兼容此規(guī)范的最簡(jiǎn)單形式，并在此基礎(chǔ)擴(kuò)展了一些語(yǔ)法，以便于開(kāi)發(fā)包含CSS及HTML模板的JavaScript UI組件。
直接來(lái)看一下使用Package.js開(kāi)發(fā)的項(xiàng)目的目錄結(jié)構(gòu)吧，簡(jiǎn)單明了：
復(fù)制代碼 代碼如下:
Test
├── dom
│ └── Style.js #命名空間為T(mén)est.dom.Style的模塊文件
├── init.js #根命名空間初始化文件
├── _nsconf_.js #Package.js會(huì)讀取的配置文件
├── 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 #命名空間為T(mén)est.util.Cookie的JS包
└── _xproxy_.html -> ../Package/_xproxy_.html #此文件為Soft Link指向Package.js源碼中的Package/_xproxy_.html，用于跨域加載HTML模板文件
使用Package.js，模塊的定義語(yǔ)法——
Root/ui/Button/init.js代碼：
復(fù)制代碼 代碼如下:
Package.define("Root.ui.Button",["Root.ui.Pane","Root.util.Tpl","Root.util.Event"],
function (Pane,Tpl,Event) {
//Pane為Root.ui.Pane
//Tpl對(duì)應(yīng)Root.util.Tpl
//依此類(lèi)推
//.....
});
與CommonJS的AMD規(guī)范不同，在Package.js的語(yǔ)法中，一個(gè)JS模塊，不但可以依賴(lài)其它JS包，還可以依賴(lài)CSS及HTML模板文件、及其它的JSON數(shù)據(jù)文件，并在運(yùn)行時(shí)，獲取到依賴(lài)的其它文件的內(nèi)容。定義語(yǔ)法如下：
復(fù)制代碼 代碼如下:
Package.define("NS.ui.Button",["MT.ui.Component"],
{
tpl:"tpl.html",
_style:"style.css"
},function (Component) {
//通過(guò)this.assets.tpl訪問(wèn)tpl.html內(nèi)容
var bgImgUrl=this.path+"img/bg.png",tpl=this.assets.tpl;
function Button(opt) {
//也可以通過(guò)當(dāng)前Package對(duì)象的_pkgMeta_屬性訪問(wèn)assets
this.tpl=String2Dom(opt.tpl || Button._pkgMeta_.assets.tpl);
}
return Button;
})
在瀏覽器中，可以使用下面的方法導(dǎo)入一個(gè)JS模塊，
在導(dǎo)入的過(guò)程中，Package.js自動(dòng)幫您做了后勤工作：1、加載這個(gè)模塊的依賴(lài)模塊。2、加載依賴(lài)的HTML及CSS文件。
復(fù)制代碼 代碼如下:
Package.imports(["Root.ui.Button"],function (Button) {
var btn=new Button();
btn.renderTo(document.body);
});
在開(kāi)發(fā)時(shí)，為了模塊化，您需要將JS分成一個(gè)一個(gè)小的模塊文件，但發(fā)布到生產(chǎn)環(huán)境時(shí)，為了加載速度上的考慮，您需要將這些JS文件合并成單個(gè)的JS文件并壓縮，同樣，CSS文件也要合并到一起。
復(fù)制代碼 代碼如下:
//您的打包配置文件
//build-config.json文件內(nèi)容
{
"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進(jìn)行壓縮
}
借助Package.js，完成這個(gè)功能，您只需要寫(xiě)三四行JSON配置代碼，執(zhí)行一個(gè)命令，就一切OK了。
復(fù)制代碼 代碼如下:
#執(zhí)行命令
build.js build-config.json js all.min.js
build.js build-config.json css all.min.css
#腰不酸了，腿不疼了！
引用
PS：build.js還幫您做掉一個(gè)小事：將CSS文件中的background:url()之類(lèi)的相對(duì)路徑轉(zhuǎn)換成絕對(duì)URL。您在開(kāi)發(fā)時(shí)，CSS中url()始終只需要寫(xiě)相對(duì)路徑，在部署到生產(chǎn)環(huán)境時(shí)，build.js合并后的CSS會(huì)自動(dòng)將其轉(zhuǎn)換成絕對(duì)URL。甚至，如果你有使用IE6 Png AlphaImageLoader濾鏡，使用wui4ie6的loader,您在開(kāi)發(fā)時(shí)仍然可以在src=里寫(xiě)相對(duì)路徑，在開(kāi)發(fā)模式下，Package.js也會(huì)自動(dòng)生成使用絕對(duì)URL的CSS Rule，在打包時(shí)也會(huì)對(duì) AlphaImageLoader的src作轉(zhuǎn)換，CSS中永遠(yuǎn)不需要寫(xiě)絕對(duì)URL
Package.js相比于其它模塊加載器及AMD實(shí)現(xiàn)（RequireJS，SeaJS...）有什么優(yōu)勢(shì)或缺點(diǎn)？
Package.js是面向Web App Framework開(kāi)發(fā)，定義語(yǔ)法及文件目錄結(jié)構(gòu)較嚴(yán)格（或者說(shuō)稍顯復(fù)雜）,只使用AMD規(guī)范中最簡(jiǎn)單的一種define語(yǔ)法
Package.js將JS模塊對(duì)CSS及HTML文件的依賴(lài)與對(duì)其它JS模塊的依賴(lài)在define寫(xiě)法上區(qū)分開(kāi)來(lái)，并且在build.js中也包含了對(duì)CSS、HTML、JSON打包的處理
（TOT）包含對(duì)IE6 CSS的特殊照顧（沒(méi)辦法，我們自己的項(xiàng)目需要）
增加PackageMeta,一個(gè)JS模塊在運(yùn)行時(shí)可以知道自己的URL
...如果算缺點(diǎn)的話：不與CommonJS AMD規(guī)范完全兼容
build時(shí)支持三種導(dǎo)出模式：includes,deps,all
開(kāi)發(fā)模式下更方便：使用_xproxy_.html跨域加載，無(wú)需代理。使用_nsconf_.js，無(wú)需配置paths。
聽(tīng)完這些簡(jiǎn)單的介紹或許您對(duì)Package.js已經(jīng)躍躍欲試了，在使用之前，您可以參考下
Package.js的詳細(xì)文檔:http://package-js.googlecode.com/hg/docs/Package.html。
好！不要再用落后的方式開(kāi)發(fā)JavaScript App，不要再做Out Man，趕快使用Package.js吧 ^O^
您可能感興趣的文章:
- JavaScript讀寫(xiě)二進(jìn)制數(shù)據(jù)的方法詳解
- JavaScript實(shí)現(xiàn)JSON合并操作示例【遞歸深度合并】
- JavaScript函數(shù)、閉包、原型、面向?qū)ο髮W(xué)習(xí)筆記
- JavaScript使用indexOf()實(shí)現(xiàn)數(shù)組去重的方法分析
- JavaScript日期工具類(lèi)DateUtils定義與用法示例
- Reactnative-iOS回調(diào)Javascript的方法
- JavaScript實(shí)現(xiàn)簡(jiǎn)單的隱藏式側(cè)邊欄功能示例
- 詳解vue-cli 腳手架項(xiàng)目-package.json
- package.json文件配置詳解
- 詳解Nodejs之npm&package.json
- nodejs npm package.json中文文檔
- Javascript 之封裝（Package）
相關(guān)文章
這篇文章主要介紹了js改變文章字體大小的實(shí)例代碼，有需要的朋友可以參考一下2013-11-11
這篇文章主要介紹了JavaScript中的依賴(lài)注入詳解,本文講解了requirejs/AMD方法、反射(reflection)方法等內(nèi)容,需要的朋友可以參考下2015-03-03
在html和xml文件中，往往會(huì)因?yàn)橐韵绿厥庾址鴮?dǎo)致文件解析出錯(cuò)，一般通過(guò)以下函數(shù)來(lái)處理。2009-04-04
uni-app實(shí)現(xiàn)微信小程序長(zhǎng)按拍視頻功能
這篇文章主要為大家詳細(xì)介紹了uni-app實(shí)現(xiàn)微信小程序長(zhǎng)按拍視頻功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
js 復(fù)制或插入Html的實(shí)現(xiàn)方法小結(jié)
很多情況下是用innerHTML或innerText,現(xiàn)在比較流行直接的dom操作，大家可以根據(jù)需要選擇。2010-05-05
js監(jiān)聽(tīng)滾動(dòng)條滾動(dòng)事件使得某個(gè)標(biāo)簽內(nèi)容始終位于同一位置
js如何監(jiān)聽(tīng)滾動(dòng)條滾動(dòng)事件，使得某個(gè)標(biāo)簽內(nèi)容始終位于同一位置，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-01-01
select每選擇一個(gè)option選項(xiàng)減少對(duì)應(yīng)的option實(shí)現(xiàn)方法
這篇文章主要為大家介紹了select每選擇一個(gè)option選項(xiàng)減少對(duì)應(yīng)的option實(shí)現(xiàn)方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-12-12
本文主要分享了js實(shí)現(xiàn)導(dǎo)航吸頂效果的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
webpack打包優(yōu)化的幾個(gè)方法總結(jié)
這篇文章主要介紹了webpack打包優(yōu)化的幾個(gè)方法總結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
使用mixins實(shí)現(xiàn)elementUI表單全局驗(yàn)證的解決方法
這篇文章主要介紹了使用mixins實(shí)現(xiàn)elementUI表單的全局驗(yàn)證的解決方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04