node package manager
Painless code sharing. npm Orgs help your team discover, share, and reuse code. Create a free org »

xtao

xtao

方便TOP组件开发的命令行工具。在使用此工具/开发组件前请务必阅读:TOP组件开发规范

安装

npm install -g xtao

使用

创建一个新组件

xtao create widgetname [options]

Options
    -v(--version) version 指定版本号(默认为1.0)
    -f(--iframe) 生成iframe模板文件

此命令帮助快速建立一个新组件的文件结构以及模板文件,如下所示:

widgetname
    |
    |--version(默认1.0)
         |
         |--assets                  <--该目录下存放组件所需资源文件
         |    |  
         |    |--widgetname.css     <--组件样式文件  
         |  
         |--demo  
         |    |  
         |    |--src                <--个性化的设置可以修改该目录下对应文件(此目录下的文件都会在build的时候合并到demo文件中)
         |        |
         |        |--config.html    <--demo的配置部分
         |        |--preview.html   <--demo的预览部分
         |        |--demo.css       <--demo的样式文件
         |        |--demo.js        <--demo的脚本文件
         |
         |--widgetname.js           <--组件脚本文件
         |--config.json             <--组件参数配置文件

config.json说明

{
    "name": "widgetname",                   // 组件名称(如:login-btn)
    "label": "widgetname",                   // 组件显示名字(如:淘宝登录组件)
    "description": "Widget Description",    // 组件描述
    "ui": {
        "groups": [                         // 配置项分组
            {"key": "basic", "label": "Basic Settings"},
            {"key": "advanced", "label": "Advanced Settings"}
        ]
    },
    "options": {                            // 配置项
        "container": {                      // 配置项的key
            "type": "String",               // 配置项的类型[String|Selection|Boolean]
            "label": "组件容器",             // 配置项显示名称
            "default": ".top-widgetname-container",  // 默认值
            "tips": "组件容器的选择器",       // 配置项帮助信息
            "required": true,               // 配置项是否必填
            "group": "basic"                // 配置项所在分组
        },
        "name": {
            "type": "String",
            "label": "姓名",
            "default": "Goddy Zhao",
            "tips": "填写姓名",
            "required": true,
            "group": "basic"
        },
        "education": {
            "type": "Selection",
            "label": "学历",
            "default": "bachelor",
            "values": [                     // Selection类型的值选项
                {"key": "bachelor", "label": "本科"},
                {"key": "master", "label": "硕士"},
                {"key": "doctor", "label": "博士"},
                {"key": "god", "label": "圣斗士"}
            ],
            "required": true,
            "group": "basic"
        },
        "isF2E": {
            "type": "Boolean",
            "label": "是否前端",
            "default": false,
            "description": "是",             // Boolean类型的描述
            "required": true,
            "group": "basic"
        }
    }
}

构建组件

xtao build [options] //此命令必须到widgetname/version 目录下运行

Options
    -f(--force) 强制根据config.json生成src/config.html(默认只在第一次时候生成)
    -a(--all) 生成用于最终发布的demo/demo.html

此命令帮助自动根据config.json生成demo页面,如下所示:

...
         |
         |--assets                  
         |    |  
         |    |--widgetname.css     
         |  
         |--demo  
         |    |  
         |    |--src                
         |    |   |
         |    |   |--config.html      <--根据config.json自动生成(需-f或者初次)
         |    |   |--preview.html   
         |    |   |--demo.css       
         |    |   |--demo.js        
         |    |           
         |    |--demo-dev.html        <--自动生成的用于daily测试的demo(域名:www.mashupshow.com)           
         |    |--demo-pro.html        <--自动生成的用于预发测试的demo(域名:xtao.aliapp.com)             
         |    |--demo.html            <--自动生成的用于最终发布的demo(需-a参数)  
         |                
         |--widgetname.js           
         |--config.json             

demo-dev.html、demo-pro.html以及demo.html生成规则除了appkey和sign的注入不同,其他都一样。

原理就是将src/下的文件套上模板文件后输出,模板文件示意图如下所示:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        全局样式文件
        <style type="text/css">
            src/demo.css的内容
        </style>
    </head>
    <body>
        <div class="main-app-container">
            ...
            <div class="top-config">
                src/config.html的内容
            </div>
            <div class="top-preview">
                src/preview.html的内容
            </div>
            ...
        </div>

        全局脚本文件(包括将签名写cookie的脚本)
        <script>
            src/demo.js的内容
        </script>
    </body>
</html>