一种模块化开发的目录结构和部署tips

开发环境

开发态目录结构类似:


然后用express的static,将上下文映射到static那级目录上,比如访问:

http://ip:5000/employee/employeeList.html

就可以加载到,并不需要输入http://ip:5000/employee/static/employeeList.html

package.js是该模块的出口,如果别的模块依赖该模块,就require它,比如

 

require("employee/package").employeeList;


可以看到,这里同样也不需要加上static。至于模块内部的依赖,用相对标识就比较好

 

 

require("./employeeList");


总的来说,个人建议模块内部的依赖用相对标识,跨模块的依赖用顶级标识

 

但是上面这种方式(直接映射到static,而不是employee)会有一个问题,就是js文件用grunt-cmd-transport提取依赖以后,模块ID一定会根据真实的路径提取(除非写代码遍历生成idleading,那会很麻烦),即会变成

 

define("employee/static/package", [], function(require, exports, module){
});


然后又由于seajs规定的“路径即ID规则”,合并后的文件一定要放在employee/static/package.js下,这样前面说的

 

 

require("employee/package");


就加载不到了,这个问题可以通过在grunt transport时,增加alias参数来解决,会自动修改require()里的代码

 

生产环境

生产环境的目录结构类似:


可以看到,seajs的模块单独放到了新增的sea_modules目录下,这个目录在开发态是没有的。主要是为了保持module_id和物理路径的一致,比如都是employee/static/package.js

同时,每个模块下的目录结构也缩减了一层,去掉了static,因为在生产环境,server端的代码已经被拿走了,就没有必要再单独区分static了。而且这样URL也会比较好,比如通过:

http://ip:80/employee/index.html就可以访问到,不需要输入http://ip:80/employee/static/index.html

总的来说,希望达到的效果是:

1. 开发的时候可以分模块来开发,不同的人负责各自的模块,在模块内部区分开static和server

2. 开发态和生产环境的路径一致,代码不需要修改,就可以在开发态和部署态同时跑起来,方便开发,容易部署

3. 生产环境的目录结构层级要浅一点,不要在URL里写static

解释

只所以会这么复杂,也有很多原因:

1. 如果生产环境不去掉static,那就没后面的问题,但是这样URL里就要加上static,很不方便,所以生产环境的目录结构里不能有static这一层,而开发态又必须要有(才能跟server区分开)

2. 既然两边的目录结构不一致,就要想办法统一URL,不然就会有很多问题。比如通过$router找html的时候,开发环境和生产环境的URL就要区分开,增加了复杂度。再比如我们的CSS里有.png的地址,路径不一致的话就只有一边能找到。所以想到的办法,就是把开发环境静态文件绑定到static那一层上,而不是模块那一层,这样通过一致的URL:

http://ip:port/employee/index.html就都能访问到了

3. 可是这样一来,require("employee/static/package")又访问不到了,因为多了一级static

http://ip:port/employee/static/package => employee/static/static/package.js// 错了

所以要写成require("employee/package"),这样才对

4. 问题是上述require,在开发阶段是好使的,但是在生产环境是坏的。因为seajs的规则决定了,合并后的package.js必须放在employee/static/下,所以要从具体的模块中拿出来,单独放到sea_modules里面,整个路径是sea_modules/employee/static/package.js,然后把seajs base设置成sea_modules。再通过transport alias,自动把require("employee/package")改成require("employee/static/package")

5. 最后还要在index.html里处理一下,主要是判断当前的环境,设置不同的seajs base,以及seajs.use()

总结

 

  • 一个模块一个出口
  • 模块内部依赖用相对标识,跨模块依赖用顶级标识
  • 合并压缩后的seajs模块,目录相对位置要一致
  • 利用一些小技巧区分开发环境和部署环境
  • 绝对路径有时候挺好用的

 

 

posted @ 2013-11-14 20:27  pangbangb  阅读(473)  评论(0编辑  收藏  举报