Jad-react-cli NPM

jad-react-cli generate系列

起源：

前端项目中,特别是中后台项目,存在大量重复页面,举例: 最常用的一个筛选列-表格-分页的页面

这类页面组成如下:

**page: test**
由以下三部分组成
1.test-filter--Component
2.test-table-component
3.test-pagination-component

在这里其中几乎所有的相识业务展示页面都由以上三部分构成,其中不同的页面逻辑区别，无非以下几点

·filter-group 的部分不同 
·table的cloums 的部分不同 等等
·onHandleCallBack 存在部分差别

由此,理想情况下,在开发此类业务时,希望做到以下部分,进行简化操作

·写好同类型业务模板,模板内部参数动态化,模板名动态化,模板输出路径动态化
·page->name  page->path 以及内部不同参数的自定义
·如 原始模板public tempalte
·$(name)Template.tsx => 输出 name=test outPath=/src/page/test
·输出如下 => src/page/test/testTemplate.tsx
·同理,tempalte内部也需要支持,动态的变量化,内部支持内联js脚本

以上同理,form,弹出层业务,也存在相似情况,区别在于form表单的业务,差异性相对较大
区别点在于： 1.form.item的差别较大,不好定义,逻辑差别也较大 2.form,只有部分逻辑和Component是一样的,其他的复用性不大 3.一般模板只提供基础的form.item,仅包含长见的类型。 phone and email等骨架componemt 4.并提供常用的formData校验pipeFn,来完成form.item骨架
```
·这里需要template支持，细度的拆分
·写一套通用情况的form.item作为模板
·支持 form.item1 + form.item5 + form.item7 = 自由组合成需要的form
```

解决方案:

1.考虑到开发成本,后续维护成本等因数,采用goole的angular团队提供的angular-cli提供的工具流、

在angular-cli generate实现中,依赖Schematics这个独立的工具库,Schematics本质上是一个virtualFile-tree的文件引擎,由于目前Schematics并未完成。
并在angular 7中被合并进了angular-cli,因为Schematics本身不提供api,需要依赖Schematics-cli来执行
所以需要单独提取出来,针对angular-cli的设置,集成进jad-react-cli中
Schematics在angular-cli generate中实现了以上需要的绝大部分功能,需要改造实现针对react等其他应用的支持

Schematics-cli的命令声明

```json
"schematics": {
    "myTemplate": {
        "aliases":["mt"],                               //shell 命令简写
        "description": "这是初始化的模板组件",             //描述
        "factory": "./myTemplate/index#RunGenerate",    //模板生成函数位置
        "schema": "./myTemplate/config.json"            //shell optipns 配置
    }
}
```

Schematics-cli的shell optipns 配置
```json
{
    "$schema": "http://json-schema.org/schema",
    "id": "myTemplate",
    "title": "my new tempalte project",
    "type": "object",
    "properties": {
        "path": {
            "type": "string",
            "format": "path",
            "description": "创建模板的路径",
            "visible": false
        },
        "name": {
            "type": "string",
            "description": "创建模板的命名",
            "$default": {
                "$source": "argv",
                "index": 0
            }
        }
    },
    "required": [name],
    "additionalProperties": false
}
```
-----------------------------------------------------------------------
一个简单的schematics模板构成

//路劲模板
file->
    __name@classify__.tsx
    __name@classify__.sass

//__name@classify__.tsx内容
```tsc
import React,{ Component }from 'react';
import style from './<%= classify(name) %>.module.less';
const <%= classify(name) %> : Component<Props>= ({ children }) => (
    <p>
        <%= classify(name) %> works!
        {children}
    </p>
);
export default <%= classify(name) %>;
```

//运行命令
jad-react-cli generate :mt name=test path=/src/template

该命令将在项目/src/template目录下生成
    test ->
        test.tsx
        test.sass