一种模块化开发的目录结构和部署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模块，目录相对位置要一致
• 利用一些小技巧区分开发环境和部署环境
• 绝对路径有时候挺好用的