lenz-react v0.0.1

lenz-reactTool

构建react项目流程工具，可以生成相应目录和代码，同时对项目进行编译 一次安装，到处运行 目前针对移动端上线 注：全局命令为reactTool

功能一览

创建项目

• 生成项目、模块、页面、组件文件结构

编译预览

• 轻量组件化功能
• 本地预览

• 数据模拟

  	`* 详见数据模拟配置(向下)`

安装

基于node，请确保已具备较新的node环境（>=8.X）

安装本项目 tbrush

$ [sudo] npm install -g lenz-brush

初始化项目

根据输入的项目名称和选择的项目框架，生成一个新的项目目录

命令：
$ tbrush init

项目github地址 https://github.com/zhanglizhao/lenz-typescript-project/tree/release

可查看项目说明

启动一个服务

根据项目目录下的brush.json 配置 启动一个服务器

命令：
$ tbrush connect

服务反向代理

根据项目目录下的brush.json 配置的"proxy"项设置代理地址

如：配置"proxy"为"http://xx.xxx.com/"；
请求:http://localhost:8891/filterSps4WebV2
等于请求：http://xx.xxx.com/filterSps4WebV2
另外也可通过命令来启动
命令
$ tbrush connect --proxy xx.xxx.com
或
$ tbrush connect --proxy http://xx.xxx.com

按需编译加载页面

多个页面编译启动服务时，为提升编译速度，可根据开发页面按需编译需要开发加载的页面，这样能很大程度上提示改动文件后的编译速度。

如：命令
$ tbrush connect --apps index
或
$ tbrush connect --apps index&login  //多个页面模块用 '&' 符合连接

其中 index  login 是brush.json 下的 modules或者apps的key值

全局变量（环境变量）

通过配置brush里面的brushTcl标识就相当于全局变量，你的业务代码可以直接使用配置的标识。

比如，你通过下面的设置：

 // brush.json
 {
     brushTcl:"test"
 }

那么在你的业务代码中可以直接使用，比如有一个index.ts里面你可以直接这样使用：

// index.ts
if (brushTcl=='test'){
    // 任意代码
    console.log(‘这个是我通过webpack配置的全局标识’)
}
当然 ‘brushTcl’ 的值可以通过命令传递，也可以通过手动的配置

其他命令

参数 -h 查看已有命令

参数 -V 查看当前版本号

brush.json 配置说明

	{
    "name": "test",
    "dir":"release",
    "proxy":"http://xx.xxx.com/", //设置即可启动反向代理功能
    "hbsHelperDirs":"src/assets/common/hbsHelper/",//hbs helper文件目录入口
    "devserver": {
        "port": 8891,
        "publicPath": "../",
        "dest": "dist",
        "dataDir": "./data/",
        "mockConfig": "./mockConfig.json"
    },
    "modules||apps": {  //0.0.9 后改名 apps 同时 modules也支持
        "login": {
            "basePath": "./src/apps/login/",
            "js": ["index.ts"],
            "css": [
                "./css/index.css"
            ],
            "html": "index.html",
            "vendor": {
                "js": "base",
                "css": "common"
            }
        }
    },
    "vendors": {
        "js": {
            "base": [                
                "./src/assets/lib/jquery/jquery.js"
            ]
        },
        "css": {
            "common": [
                "./src/assets/css/rest.css",
                "./src/assets/font/iconfont.css"
            ]
        }
    }
	}

数据模拟

• 注释：模拟数据的路由配置需要在brush.json的devserver增加mockConfig参数;以数组形式传入; 如:"mockConfig":./data/db.json" db.json格式如下

模拟数据 示例

{
  "api/v1/blog/user!getUserInfo":"userInfo.json",
  "api/v1/blog/page/{*}":{
    "method=GET":"list_notice.json",  
    "method=POST":"selectTree.json"
  },
  "api/v2/blog/user!getUserInfo":{
	//其中uuid是参数值为user 即匹配 
	//api/v2/blog/user!getUserInfo?uuid=user  api/v2/blog/user!getUserInfo?uuid=user&t=0 等的get请求 
    "method=GET&uuid=user":"list_notice.json",
    "method=POST":"selectTree.json"
  },
  "api/{*}/{*}":{
    "uid=2&t=3":"topMenu.json"
  },
  "api/{*}/{*}/detail":"topMenu.json"
}

版本更新日志

• 注：配置文件会随框架下载时配置好，一般不需要修改