OYE Build工具实现与应用

dh20156 2012-06-13 05:09:47

加精

续前篇： OYE - AMD模块化开发思想的实现原理及应用

OYE是一个AMD的模块加载器，也是项目中脚本模块化开发的组织和调度者。

模块化开发这种方式从目前来看，不论是对项目的维护，团队开发的协调与代码质量的保证等方面，都有着积极的客观存在的益处。

OYE Build工具于近日发布了，基于Node JS,包含以下几个文件:

OYE Build工具包文件清单
build.js – Build脚本
config.js – Build配置
jsmin.js – JS 文件最小化函数
oye.node.js – OYE for node

至此，围绕OYE展开的前端脚本模块化开发终于成为一个比较完善的整体解决方案。

要讲到项目上线，我们先简单看看，假设在我们的项目中，一共有10个页面，那么，上线后我们的脚本资源加载情况可能会有以下几种：

a) 项目中所有脚本合并压缩到一个文件
b) 保持开发阶段的代码，不进行任何文件合并和压缩
c) 公共部分进行合并压缩，每个页面用到的脚本各自合并压缩到一个文件

第一种情况，好处是脚本资源的请求数最少，不足的地方在于脚本资源多的情况下，文件会很大。

第二种情况，好处是不用Build环节，线上线下代码一致，Debug也会比较方便，不足的地方在于脚本资源多的情况下，请求数会很多。

第三种情况，好处是脚本资源请求数适量，合并压缩后的文件大小适量，比如那10个页面，它们每个页面的脚本资源请求数可能在2-3个，其中只有1个是它们各自才会用到的，其他的都是公共的，情形如下：

home page: lib.js, common.js, home.js;
list page: lib.js, common.js, list.js;
detail page: lib.js, common.js, detail.js;

可以看到，lib.js和common.js将在用户访问第一页面后被缓存，后面的页面只需请求各自用到的脚本文件。

从我个人的角度来看，我更倾向于采用第3种方式进行脚本资源的合并压缩，如果能在这个基础上，能将第2种方式中的优势，”不用Build或Build很简单，线上线下代码一致或至少Debug很方便” 带入的话，那将会对项目的开发、上线带来很好的体验。

而使用OYE，正好符合这种方式的预期，可以为开发和上线带来很好的体验。现在我们来看看使用OYE如何进行项目脚本的模块化开发调度与上线。

1.开发阶段

在项目引入oye.js，作为common的部分引入到每个页面。

我们最好能采用页面入口文件的方式对每个页面交互脚本的引入进行控制保证不凌乱，而这正好可以通过模块化开发来解决，情形如下：

页面”home”

<html>
……
<script src=”oye.min.js”></script>
<script>
//home页面上所有的交互脚本都通过此入口进行引入
require(‘app/home’, function(home){
home.init();
});
</script>
……
</html>

页面”home”的入口模块定义，该文件保存在app/home.js

//将所有需要在页面home中用到的模块在此入口模块中引入
define(['app/home/wall','app/home/recentmsg'],function(wall, recentmsg){
return {
init:function(){
wall.init();
recentmsg.init();
}
};
});

开发阶段的代码就这样写，每个都是匿名模块，调试起来也没有问题，OYE支持具名和匿名模块的。

2.Build上线

项目要上线了，我们现在需要将交互脚本进行合并压缩，很简单，下载OYE Build工具包，它就是一个文件夹，文件清单在我们的文章开头已经有列出。
由于OYE Build脚本的实现是基于Node JS的，所以，请在要进行Build的机器上安装好Node，不同系统的安装方式可以网际搜索找到。

Node JS和OYE Build工具包都准备好后，我们就可以进行项目的Build过程了。

执行步骤:
1.将oye_build文件夹复制到项目所在服务器任意位置
2.用文本编辑器打开config.js文件进行配置
3.执行node命令: node oye_build文件目录/build.js
4.Build结束

Build结束后，我们会
生成一个app.config.js文件，它用来配置所有的OYE模块对应的文件，这个文件名和路径是可配置的；
按照我们期望的对公共的、每个页面的模块进行合并压缩，这些都是可配置的；
生成 xxx.min.js 和 xxx.all.js，我们可以通过”Fiddler”等工具来进行线上Debug；

要继续开发，一点影响都没有，只要将生成的app.config.js移除即可，打开页面的时候，OYE仍然会从开发目录读取各个模块。

资源下载

OYE Build工具包下载: oye_build.7z

OYE Build工具包应用演示下载: oye_build_demo.7z

config.js配置

//设定oye.js在项目中的路径
oyeModulePath = 'C:\\Users\\hudu\\easytomcat\\webapps\\oye\\tool\\';

//设定项目根目录路径
projectRootPath = 'C:\\Users\\hudu\\easytomcat\\webapps\\oye\\';

//设定Build后的文件要保存的目录，线上代码将会从此目录中读取所有的OYE模块，从而与开发目录保持分离
onlinePath = 'C:\\Users\\hudu\\easytomcat\\webapps\\oye\\tool\\publish\\';

/*
设定Build后生成的oye配置文件，目的为，为所有模块指定引用路径其生成的内容形式为:
require.config({
"app/home/filter":"publish/app/home/home.min.js",
"app/home/list":"publish/app/home/home.min.js"
}, true);
*/
configFile = 'C:\\Users\\hudu\\easytomcat\\webapps\\oye\\tool\\app.config.js';

//设定“配置文件路径前缀”, 如果onlinePath与oyeModulePath不一致, 则必须将不一致的部分作为“配置文件路径前缀”
configFilePathPrefix = 'publish/';

//设定是否生成 xxx.all.js，可用于debug线上的xxx.min.js
bGenerateDebugFile = true;

/*
设定所有需要进行Build的入口模块列表建议您将所有项目中用到的模块入口文件存储到一个固定的目录，如js/app/这样你就可以很方便的对整个项目进行控制并方便的进行Build
*/
apps = [
'app/home',
'app/detail'
];

//设定不需要进行Build的模块，出现在这里的模块不会被此工具合并压缩，引用路径也不会发生变化
withoutCombinedModules = {
'jquery':true,
'component/usersearch':true
};

/*
设定特殊的模块合并规则key:value，key的匹配过程如下；先进行整段匹配，如果没有匹配到，则将最后一段替换为*进行再次匹配，直到没有可以替换的为止：app/home/list -> app/home/* -> app/*value的意义为：匹配到的模块将存储到的目标文件，如：'app/home/*':'app/home/home'，其意义为，app/home/下的所有模块将合并到 app/home/home.min.js 文件
*/
specialRules = {
'app/home/*':'app/home/home',
'util/*':'util/util'
};

//Special config for modules which name cannot match the file
//特殊模块设定，那些需要进行配置才可以进行引用的模块需要列出在此，否则Build脚本无法读取到这些文件
specialConfig = {
'jquery':'lib/jquery-1.7.1.min.js'
};

//设定JS文件压缩等级
levelOfJSMin = 3;
/*minimal:1,//压缩比:75%conservative:2,//压缩比:68%agressive:3//压缩比:67%*/

...全文