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 相关文章推荐
javascript 文件的同步加载与异步加载实现原理
Dec 13 Javascript
jquery showModelDialog的使用方法示例详解
Nov 19 Javascript
JS小游戏之极速快跑源码详解
Sep 25 Javascript
JavaScript实现的圆形浮动标签云效果实例
Aug 06 Javascript
基于JavaScript实现div层跟随滚动条滑动
Jan 12 Javascript
常用的js方法合集
Mar 10 Javascript
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
webpack vue项目开发环境局域网访问方法
Mar 20 Javascript
微信小程序自定义底部导航带跳转功能
Nov 27 Javascript
JS开发自己的类库实例分析
Aug 28 Javascript
VUE Elemen-ui之穿梭框使用方法详解
Jan 19 Javascript
详解微信小程序轨迹回放实现及遇到的坑
Feb 02 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
PHP中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
比较简单实用的PHP无限分类源码分享(思路不错)
2011/10/13 PHP
处理(php-cgi.exe - FastCGI 进程超过了配置的请求超时时限)的问题
2013/07/03 PHP
symfony2.4的twig中date用法分析
2016/03/18 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
用js实现上传图片前的预览(TX的面试题)
2007/08/14 Javascript
javascript 写的一个简单的timer
2009/07/30 Javascript
JS 显示当前日期与时间的代码
2010/03/24 Javascript
js兼容的placeholder属性详解
2013/08/18 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
javascript实现行拖动的方法
2015/05/27 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
2015/09/18 Javascript
BootStrap制作导航条实例代码
2016/05/06 Javascript
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
2016/12/27 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
什么是Vue.js框架 为什么选择它?
2017/10/17 Javascript
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
使用python绘制人人网好友关系图示例
2014/04/01 Python
利用Python绘制数据的瀑布图的教程
2015/04/07 Python
django 将model转换为字典的方法示例
2018/10/16 Python
python numpy元素的区间查找方法
2018/11/14 Python
Python 存储字符串时节省空间的方法
2019/04/23 Python
Django之路由层的实现
2019/09/09 Python
python传到前端的数据,双引号被转义的问题
2020/04/03 Python
python开发一个解析protobuf文件的简单编译器
2020/11/17 Python
python使用numpy中的size()函数实例用法详解
2021/01/29 Python
css3中background新增的4个新的相关属性用法介绍
2013/09/26 HTML / CSS
关于box-sizing的全面理解
2016/07/28 HTML / CSS
Kate Spade澳大利亚官方网站:美国设计师手袋品牌
2019/09/10 全球购物
旅游管理本科生求职信
2013/10/14 职场文书
中学生在校期间的自我评价分享
2013/11/13 职场文书
关于工资低的辞职信
2014/01/14 职场文书
保安部任务及岗位职责
2014/02/25 职场文书
学生无故旷课检讨书
2014/09/20 职场文书
家庭困难证明
2014/10/12 职场文书