Package.js  现代化的JavaScript项目make工具


Posted in Javascript onMay 23, 2012

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

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代码:
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规范不同,在Package.js的语法中,一个JS模块,不但可以依赖其它JS包,还可以依赖CSS及HTML模板文件、及其它的JSON数据文件,并在运行时,获取到依赖的其它文件的内容。定义语法如下:
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); 
});

在开发时,为了模块化,您需要将JS分成一个一个小的模块文件,但发布到生产环境时,为了加载速度上的考虑,您需要将这些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配置代码,执行一个命令,就一切OK了。
#执行命令 
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。您在开发时,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^ 

Javascript 相关文章推荐
最近项目写了一些js,水平有待提高
Jan 31 Javascript
JavaScript 闭包深入理解(closure)
May 27 Javascript
javascript 精粹笔记
May 09 Javascript
JavaScript String.replace函数参数实例说明
Jun 06 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
May 21 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
Jun 20 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
Aug 18 Javascript
ES6概念 Symbol toString()方法
Dec 25 Javascript
微信小程序 五星评价功能的实现
Mar 09 Javascript
ES6 Generator基本使用方法示例
Jun 06 Javascript
基于JavaScript实现简单抽奖功能代码实例
Oct 20 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
Nov 12 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
May 23 #Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
May 23 #Javascript
setTimeout的延时为0时多个浏览器的区别
May 23 #Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
May 23 #Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
May 23 #Javascript
Javascript 面向对象(三)接口代码
May 23 #Javascript
Javascript 面向对象(二)封装代码
May 23 #Javascript
You might like
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
phpmailer简单发送邮件的方法(附phpmailer源码下载)
2016/06/13 PHP
php利用header函数下载各种文件
2016/08/24 PHP
初窥JQuery(二) 事件机制(1)
2010/11/25 Javascript
原生js做的手风琴效果的导航菜单
2013/11/08 Javascript
JS批量修改PS中图层名称的方法
2014/01/26 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
2015/03/04 Javascript
jquery制作多功能轮播图插件
2015/04/02 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
2016/08/18 Javascript
jQuery弹出遮罩层效果完整示例
2016/09/13 Javascript
Bootstrap表单控件学习使用
2017/03/07 Javascript
Nodejs之http的表单提交
2017/07/07 NodeJs
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
ES6 javascript的异步操作实例详解
2017/10/30 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
2018/11/13 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
2019/10/11 Javascript
JS实现简单随机3D骰子
2019/10/24 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
2020/06/01 Javascript
[44:50]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第二局
2016/02/26 DOTA
对python中的pop函数和append函数详解
2018/05/04 Python
Python基于多线程实现ping扫描功能示例
2018/07/23 Python
对pandas写入读取h5文件的方法详解
2018/12/28 Python
使用python实现mqtt的发布和订阅
2019/05/05 Python
使用Python进行防病毒免杀解析
2019/12/13 Python
python如何输出反斜杠
2020/06/18 Python
python UIAutomator2使用超详细教程
2021/02/19 Python
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
护士实习自我鉴定
2013/10/22 职场文书
大型公益活动策划方案
2014/08/20 职场文书
圣诞节开幕词
2015/01/29 职场文书
六年级作文之家庭作文
2019/12/12 职场文书
elementui的el-popover修改样式不生效的解决
2021/06/30 Javascript
教你使用Python获取QQ音乐某个歌手的歌单
2022/04/03 Python
nginx之内存池的实现
2022/06/28 Servers