Skip to content
melonHuang edited this page Oct 13, 2014 · 11 revisions

#NovaUI build工具

Novaui build工具是基于grunt插件实现的,可生成外链版本,和qiwoo版本。

##Build步骤:

  1. 执行npm install命令进行安装或升级
  2. 检查并确认配置文件build.json无误(yo novaui命令已根据你的输入生成build.json)
  3. 执行grunt命令 [若只想生成外链版,执行grunt concat;若只想生成Qiwoo版,执行grunt qiwoobuild]

配置文件build.json

{
    "sidebar": {
        "version": "1.0.0",
        // Concat 配置
        "files" : {
            "build/sidebar.js" : [
                "src/sidebar.js"
            ],
            "build/sidebar.css" : [
                "src/sidebar.css"
            ]
        },
        // Qiwoobuild 配置
        "module": "Nova.sidebar",
        "src": "src/sidebar.js",
        "requires": {
            // 格式为"类名": "路径"
            "Widget": "widget/1.0.0/widget"
        }
    }
}

sidebar: 组件名
version: 版本号
files: Concat配置,用于生成外链版。key为生成目标文件的路径,value为要拼接文件的数组。
module: 组件所属模块
src: 组件源码文件路径
requires: 组件依赖模块信息。key为依赖模块的类名,value为依赖模块id。

qiwoobuild使用约束

要使用Qiwoobuild,组件需按以下结构定义,且类名为组件名的首字母大写版:

(function() {
    var Sidebar = function() {
        // ...
    }

    this.Sidebar = Sidebar
})();

根据上面的build.json,最终生成的文件路径为build/qiwoo/module/Nova.sidebar/1.0.0/sidebar.js, 内容为:

(function(root, factory) {
    if(typeof exports === 'object') {
        module.exports = factory();
    } else if(typeof define === 'function' && define.amd) {
        define(['module/widget/1.0.0/widget'], factory);
    } else {
        root['Sidebar'] = factory();
    }
})(this, function(Widget) {
    Widget = Widget || this.Widget;


    var Sidebar = Widget.extend({
        // ...
    });

    return Sidebar;
});

build所做的操作:

  1. 根据build.json中的组件名sidebar,版本号version,所属模块module,生成文件路径
  2. 将组件最外层的闭包替换为模块加载形式的代码。

Clone this wiki locally