kissy 开发中的代码组织&傻傻的打包工具
kissy 开发中的代码组织&傻傻的打包工具
Table of Contents
1 debug 模式和线上环境
debug状态下，使用的是为压缩，未合并的代码，能非常方便的定位错误;线上代码呢combo和压缩过的。若能在两种模式间快速切换将提高工作效率。kissy在设计的时候就考虑到了这种切换，通过在url里加入ks-debug参数，表示debug状态，这时候use莫个模块的时候使用的是为压缩的代码，若url中没有ks-debug，则加载的是-min.js结尾的文件
比如目录结构是这样的：
├── mods │ ├── main.js │ ├── main-min.js │ ├── mod-a.js │ └── mod-b.js └── test.html
test.html中的内容为：
<!doctype html> <html> <head> <meta charset="gbk"> <link rel="stylesheet" charset="utf-8" href="http://a.tbcdn.cn/s/kissy/1.2.0/css/reset.css"> <title>kissy module test</title> </head> <body> <script charset="utf-8" src="http://a.tbcdn.cn/s/kissy/1.2.0/kissy-min.js"></script> <script type="text/javascript"> //包信息配置 KISSY.config({ packages:[ {name:'mods',path:'./',charset:'utf-8'} ] }); KISSY.use('mods/main',function(S,Main){ Main(); }); </script> </body> </html>
main.js中的内容为
KISSY.add(function(){ function Main(){ console.log('Main'); }; return Main; });
若你访问的是127.0.0.1/test.html?ks-debug，有debug参数 KISSSY.use('mods/main',function(){}) 就会去加载mods/main.js 若你访问的是127.0.0.1/test.html，比如生产环境 KISSSY.use('mods/main',function(){}) 就会去加载mods/main-min.js
2 多个模块
main.js还依赖别的模块mod-a.js
KISSY.add(function(){ function Main(){ console.log('Main'); }; return Main; },{requires:['./mod-a']});
在debug模式下，加载完main.js后,还会去加载mod-a.js。注意上面的语法{require:['./mod-a']}js模块名可以省略后缀 若非ks-debug模式，加载完main-min.js后,还会去加载mod-a-min.js 可以看出debug模式下加载了未压缩的文件，利于调试，但是u若是在生产环境中会增加http请求
解决方法是什么呢？可以合并文件。
mod-a.js中的内容为
KISSY.add(function(){ return function(){ alert('mod-a'); } });
若将mod-a.js和main.js合并后成main-min.js，看起来是这样的
KISSY.add("mods/mod-a",function(){ return function(){ alert('mod-a'); } }); ;KISSY.add("mods/main",function(){ function Main(){ console.log('Main'); }; return Main; },{requires:['./mod-a']});
由于一个页面中只能定义一个KISSY.add(function(){}),这样的模块，合并后多个模块在一个文件中，需要有个名字区分,一般以路径名做模块名 这样做的好处就是，url加了ks-debug，访问就会异步分别载入main.js mod-a.js。 若没有加就载入合并后的main-min.js,只有一个链接。实际使用时还应该压缩。
但是上面的合并过程需要一个工具来完成
3 傻傻的合并工具
需要安装nodejs的环境 silly-builder @github 傻傻的合并非常适合用来做页面级别的打包，一个页面只有一个主入口main.js，最终的文件都合并到这个文件
Date: 2012-09-02 22:37:10 CST
HTML generated by org-mode 6.33x in emacs 23