打包流程和发布方式讨论

[lifesinger]

Arale2项目打包流程和发布方式

项目目录结构(具体参看文件命名与目录结构)

下面的目录主要设计源代码和打包后需要存放等目录

arale核心项目

    arale/
         -- dist/
             -- xxx/1.0.0/..
         -- lib/
           -- xxx/
               -- src/
                  -- __config.js
                  -- widget.js
                  -- view.js
                  -- model.js
                  -- base.css
                  -- /                  

系统项目

    static/
      -- js/
        -- base/
          -- src/
            -- __config.js
            -- base.js
            -- cahser.js
            -- personal.js
            -- sites/
              -- bj.js
              -- hz.js
              -- sh.js
          -- /
        -- module/
      -- css
        -- base/
      -- release   # 含义同 dist

相关解释

1. dist 对外发布文件目录. 根据在__config.js中dist的配置, 把需要发布的文件合并后会放到这里. 然后通过插件或者手动把里面的文件发布到对应的服务器上.
2. 是本地打包时，存放的 dist 文件，不在版本控制里。
3. /tmp 临时目录. 当我们在文件在打包过程中对源文件进行依赖分析, 映射替换, 变量替换等操作后, 文件存储的位置. 里面的文件
4. __config.js 项目配置文件. 里面记录了相关项目版本, 文件发布等信息.

项目打包相关注意事项

1. 不同的类型(arale, alipay, system)的项目, 我们打包的策略和执行相关的任务也是不同的, 策略的选择是在__config.js中parent的配置来决定的.
2. tmp目录可以认为存储的是过滤过的源文件. 其中的过滤可能是版本替换, 映射替换, 或者对文件本身进行过滤(比如只有js文件才进行过滤)等其操作后的文件. 基本上是和源文件一一对应的.
3. dist里面才是最终可以被用户使用的文件.

例证

下面我们将以一个系统项目为例子, 说明相关打包流程,和打包后的文件变化情况, 以及相关部署的操作.

源文件

/** __config.js **/
/** 相关不重要的已被省略, 具体的配置参看相关文档**/
define({
    ………..
    "version": '1.0.1-dev',
    "parent": '/config/cashier/1.1.0/', 
    "alias": {
        '_': 'ar/underscore/0.9.2/underscore.js',
        'xbox': 'ar/xbox/2.0/xbox.js',
                'sec': 'cashier/1.2/security/'
    },
    "dist": {
        'cashier.js': ['cashier.js', 'base.js'], // 在dist目录产生a.js, 并把b.js, c.js, d.js打包合并到a.js中
        'personal.js': ['personal.js', 'base.js']  
        'sites': ['sites/*.js']
    }, // 文件产生策略. 根据这个配置来确定对外部署的文件.
    "repository": "http://alipay.im/arale2/repos/", 
});

/** cashier.js **/
define(function(require, exports, module) {
     var xbox = require('xbox');
     var base = require('./base');
     var a = require('sec/a.js');
     var b = require('sec/b.js');

    exports.doSth = function() {
        //.…..
    };
});


/** personal.js **/

define(function(require, exports, module) {
    var _ = require('_');
    var base = require('./base');

    exports.doSth = function() {
        //.…..
    };
});

/** base.js **/
define(function(require, exports, module) {
    var jquery = require('jquery');

    exports.doSth = function() {
    //.…..
    };
});

打包后 中的文件

其中我们在打包后主要关注的就是dist目录的情况. 这个目录中内容主要是根据在 __config.js 中的配置来确定的. 下面就列出了按照上面的配置, 我们这个目录的相关内容, 和源码的变化.

    /
     -- /base/1.0.1-dev/cashier.js
     -- /base/1.0.1-dev/personal.js
     -- /base/1.0-1-dev/sites/
                        -- bj.js
                        -- hz.js
                        -- sh.js


/** cashier.js 

define('#cashier/base/1.0.1-dev/cashier.js', ['#casier/base/1.0.1-dev/base.js','#ar/jquery/1.7.2/jquery.js', '#ar/xbox/2.0/xbox.js', '#ar/widget/2.0/widget.js', '#ar/oo/2.0/class.js'], function(require, exports, module) {
    var xbox = require('#ar/xbox/2.0/xbox.js');
    var base = require('#cashier/1.0.1-dev/base.js');
    var a = require('#cashier/1.2/security/a.js');
    var b = require('#cashier/1.2/security/b.js');

    exports.doSth = function() {
    //.…..
    };
});
//base.js被合并进来了.
define('#cashier/base/1.0.1-dev/base.js', ['#ar/jquery/1.7.2/jquery.js'], function(require, exports, module) {
    var jquery = require('#ar/jquery/1.7.2/jquery.js');
    exports.doSth = function() {
    //.…..
    };
});


/** personal.js **/
define('#cashier/base/1.0.1-dev/personal.js', ['/casier/base/1.0.1-dev/base.js', '/ar/underscore/0.9.2/underscore.js', '/ar/jquery/1.7.2/jquery.js'], function(require, exports, module) {
    var _ = require('#ar/underscore/0.9.2/underscore.js');
    var base = require('#cashier/1.0.1-dev/base.js');

    exports.personal = function() {
        //.…..
    };
});

//base.js被合并进来了.
define('/cashier/base/1.0.1-dev/base.js', ['/ar/jquery/1.7.2/jquery.js'], function(require, exports, module) {
    var jquery = require('/ar/jquery/1.7.2/jquery.js');
    exports.doSth = function() {
        //.…..
    };
});

/** sites/下面的文件由于是资源文件, 没有变化. **/

其中在上面需要注意的是:

1. define中的几个参数
   • id (/cashier/base/1.0.1-dev/cahsier.js) 的生成是基于目录形式的的, id前缀(cashier)的确定目前是根据package.js中的parent来确定的(也可以有其他的确认方法?)
   • dependencies 模块依赖. 这个的计算是通过本js的内部require分析出来的, 而且会进行传递分析. 也就是说我们require模块的依赖也会被计算进来.
2. 别名替换 我们在项目开发的过程中可以进行相对依赖(本项目内模块的依赖require('./base.js'))模块名和全局依赖(require('xbox'))的替换. 其中相对依赖的模块我们会根据当前模块的信息替换成标准的模块id, 对于全局的我们是通过package.js中的alias配置进行替换. 所以在开发中我们对于全局模块可以使用便捷的, 短的名字, 然后在alias中配置具体的模块位置. 但是对已核心的模块, 我们会推荐相应的别名.
3. alias继承 我们发现我们的package.js中并没有配置 jquery. 这个是由于我们会有一个全局的映射配置, 这个可以通过我们的parent属性间接得到. 但是我们本地也可以选择进行覆盖. 如果我们使用相同的key, 就会覆盖父类的定义. 默认情况下对于核心模块, 用户只需要直接使用即可.

发布

把dist目录中的文件发布到相应位置即可. 比如在这里. 我们可以把dist中的目录传递到线上cashier/下面

action

1. 邵帅需要去确定后续我们发布目录的话, 可能的相关事项.

页面使用

seajs.use('/cashier/base/1.0.1{-dev}/base.js', function(base) {
    base.cashier();
});

// 
//在这里{-dev}在seajs.use的时候会去检查当前页面所在环境, 如果线上会-dev会被替换为'', 而在测试环境始终请求的是-dev.
// 其中需要理解的时候当1.0.1版本发布后这两个版本对应的模块文件是等价的(1.0.1-dev.js == 1.0.1.js) 

[lifesinger]

calendar.js
calendar.css

calendar.js:

define ...

require('./calendar.css');

spm ==>

calendar.js:

define(id, deps, fn(){

seajs.importCSS('  style ');

});

[lifesinger]

放入 spm 中