开发环境
开发态目录结构类似:
然后用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模块,目录相对位置要一致
- 利用一些小技巧区分开发环境和部署环境
- 绝对路径有时候挺好用的
分享到:
相关推荐
abap tips abap tips abap tips abap tips abap tips
本书是 Swift 语言的知识点的集合。本书中每一节都是一个相对独立的主题,涵盖了一个中高级开发人员需要知道的 Swift 语言的方方面面。当前版本Swift4.0。
活跃在 iOS 开发一线的本书作者王巍 (onevcat) 参加了 WWDC 14 开发者大会,亲历了这门语言的诞生,并在第一时间进行了大量的学习和研究。在本书中作者通过总结和分享了 Swift 中 100 条十分实用的小技巧和需要特别...
android TIPS小结android TIPS小结android TIPS小结android TIPS小结
Onevcat Swifter - Swift 开发者必备 Tips
一个非常好的tips
jquery,tips,冒泡,jquery,tips,冒泡
一个显示Tips对话框的例子
swifter-tips.pdfswifter-tips.pdfswifter-tips.pdfswifter-tips.pdfswifter-tips.pdfswifter-tips.pdfswifter-tips.pdfswifter-tips.pdfswifter-tips.pdfswifter-tips.pdfswifter-tips.pdfswifter-tips.pdfswifter-...
wxPython Grid Tips and Tricks
jquery tips提示图片信息
很多 Swift 的学习者 -- 包括新接触 Cocoa/Cocoa Touch 开发的朋友,以及之前就使用 Objective-C 的朋友 -- 所共同面临的一个问题是,入门以后应该如何进一步提高。也许你也有过这样的感受:在阅读完 Apple 的教程后...
汇总Kotlin相对于Java的优势,以及怎么用Kotlin去简洁、务实、高效、安全的开发,每个tip都有详细的说明和案例代码,争取把每个tip分析得清楚易懂,会不断的更新维护tips,欢迎fork进来加入我们一起来维护,有问题的...
Microsoft visual studio tips pdf
swifter-tips 第四版 Swifter - swift必备tips V4 移动开发 - iOS -书籍 pdf版本
VMware ESXi自动化部署实践 Automating ESXi 5 Kickstart Tips & Tricks
* $(selector).tips({ //selector 为jquery选择器 * msg:'your messages!', //你的提示消息 必填 * side:1, //提示窗显示位置 1,2,3,4 分别代表 上右下左 默认为1(上) 可选 * color:'#FFF', //提示文字色 默认...
iOS开面试题+考试试卷+懒人开发tips
100 power tips for fpga designers
Quickly access 50 tips for software test engineers using automated methods. The tips point to practices that save time and increase the accuracy and reliability of automated test techniques. ...