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 相关文章推荐
IE、FF浏览器下修改标签透明度
Jan 28 Javascript
JS替换文本域内的回车示例
Feb 18 Javascript
display和visibility的区别示例介绍
Feb 26 Javascript
javascript实现模拟时钟的方法
May 13 Javascript
JavaScript获得url查询参数的方法
Jul 02 Javascript
ionic 上拉菜单(ActionSheet)实例代码
Jun 06 Javascript
AngularJs验证重复密码的方法(两种)
Nov 25 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
Jan 11 Javascript
浅谈jquery拼接字符串效率比较高的方法
Feb 22 Javascript
vue2.0全局组件之pdf详解
Jun 26 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
Dec 06 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
Apr 24 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源码之 ext/mysql扩展部分
2009/07/17 PHP
PHP逐行输出(ob_flush与flush的组合)
2012/02/04 PHP
PHP递归遍历指定目录的文件并统计文件数量的方法
2015/03/24 PHP
jQuery中读取json文件示例代码
2013/05/10 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
2013/11/07 Javascript
javascript生成不重复的随机数
2015/07/17 Javascript
jQuery增加自定义函数的方法
2015/07/18 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
2016/02/23 Javascript
JS功能代码集锦
2016/05/04 Javascript
JavaScript中setter和getter方法介绍
2016/07/11 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
2017/02/15 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
2017/08/11 Javascript
vue 添加vux的代码讲解
2017/11/30 Javascript
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
vue debug 二种方法
2018/09/16 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
[02:47]DOTA2英雄基础教程 野性怒吼兽王
2013/12/05 DOTA
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
python使用pyhook监控键盘并实现切换歌曲的功能
2014/07/18 Python
Python模块结构与布局操作方法实例分析
2017/07/24 Python
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
python和c语言的主要区别总结
2019/07/07 Python
Django 对IP访问频率进行限制的例子
2019/08/30 Python
使用Python刷淘宝喵币(低阶入门版)
2019/10/30 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
python中altair可视化库实例用法
2021/01/26 Python
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
美国运动鞋类和服装零售连锁店:Shoe Palace
2019/08/13 全球购物
2015年人力资源部工作总结
2015/04/30 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书
2016年感恩父亲节活动总结
2016/04/01 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers