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 入门·JavaScript 具有全范围的运算符
Oct 01 Javascript
jquery 简单导航实现代码
Sep 11 Javascript
jquery对table中各数据的增加、保存、删除操作示例
May 14 Javascript
JavaScript访问字符串中单个字符的两种方法
Jul 03 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
Feb 28 Javascript
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
js下载文件并修改文件名
May 08 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
Nov 17 Javascript
微信小程序-form表单提交代码实例
Apr 29 Javascript
vue.js 2.0实现简单分页效果
Jul 29 Javascript
vue指令v-html使用过滤器filters功能实例
Oct 25 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
Aug 10 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
在Mac OS的PHP环境下安装配置MemCache的全过程解析
2016/02/15 PHP
php实现通过soap调用.Net的WebService asmx文件
2017/02/27 PHP
javascript IE中的DOM ready应用技巧
2008/07/23 Javascript
Prototype 学习 工具函数学习($方法)
2009/07/12 Javascript
编写高性能的JavaScript 脚本的加载与执行
2010/04/19 Javascript
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
jquery批量控制form禁用的代码
2013/08/06 Javascript
javascript对下拉列表框(select)的操作实例讲解
2013/11/29 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
js自调用匿名函数的三种写法(推荐)
2016/08/19 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
2016/11/01 Javascript
如何使用headjs来管理和异步加载js
2016/11/29 Javascript
vue组件父与子通信详解(一)
2017/11/07 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
详解vue项目中调用百度地图API使用方法
2019/04/25 Javascript
django中使用vue.js的要点总结
2019/07/07 Javascript
[04:26]DOTA2上海特锦赛小组赛第二日 TOP10精彩集锦
2016/02/27 DOTA
python求素数示例分享
2014/02/16 Python
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
Python中使用支持向量机SVM实践
2017/12/27 Python
在Python 2.7即将停止支持时,我们为你带来了一份python 3.x迁移指南
2018/01/30 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
python七种方法判断字符串是否包含子串
2020/08/18 Python
深入浅析HTML5中的SVG
2015/11/27 HTML / CSS
HTML5不支持frameset的两种解决方法
2016/11/14 HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
远东集团网络工程师面试题
2014/10/20 面试题
财务会计专业应届毕业生求职信
2013/10/18 职场文书
建筑项目策划书
2014/01/13 职场文书
老师的检讨书
2014/02/23 职场文书
就业协议书怎么填
2014/04/11 职场文书
商场营业员岗位职责
2015/04/14 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书
如何利用golang运用mysql数据库
2022/03/13 Golang
nginx日志格式分析和修改
2022/04/28 Servers