zoukankan      html  css  js  c++  java
  • 一种模块化开发的目录结构和部署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模块,目录相对位置要一致
    • 利用一些小技巧区分开发环境和部署环境
    • 绝对路径有时候挺好用的
  • 相关阅读:
    什么是垃圾回收??
    Nginx教程3:SSL设置
    Nginx教程2:性能
    Nginx教程1:基本概念
    iOS 设计中-- 自定义-- 评星图标的方法
    iOS设计中对Xcode设置中创建PCH文件的过程
    iOS设计中不同屏幕适配的方法-登陆界面
    iOS设计之--OC学习总结之延展类目协议
    iOS 最新版 CocoaPods 的安装流程介绍
    iOS基本UI控件总结
  • 原文地址:https://www.cnblogs.com/pangblog/p/3424042.html
Copyright © 2011-2022 走看看