lenz-rbrush

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

功能一览

创建项目

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

编译预览

• [x] 轻量组件化功能

• [x] 本地预览

• [x] 数据模拟

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

安装

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

安装本项目 lenz-react

$ [sudo] npm install -g lenz-react-brush

启动一个服务

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

命令：
$ rbrush connect

服务反向代理

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

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

按需编译加载页面

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

如：命令
$ rbrush connect --apps index
或
$ rbrush 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/", //设置即可启动反向代理功能
    "devserver": {
        "port": 8891,
        "dest": "dist"
    },
    "apps": {
        "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"
}

版本更新日志

版本|时间|更新内容 -----|:--|:-- 0.0.1 |2018-02-30|初始版本