构建react项目流程工具,可以生成相应目录和代码,同时对项目进行编译
一次安装,到处运行 目前针对移动端上线
注:全局命令为reactTool
- [x] 生成项目、模块、页面、组件文件结构
-
[x] 轻量组件化功能
-
[x] 本地预览
-
[x] 数据模拟
* 详见数据模拟配置(向下)
基于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
查看当前版本号
{
"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"
}
版本 | 时间 | 更新内容 |
---|---|---|
0.0.4 | 2017-07-04 | tpl\hbs\html支持图片的引用 |
0.0.5 | 2017-07-06 | 文件路径调整、moude模块js支持数组传入多个 |
0.0.6 | 2017-07-06 | 文件路径bug处理 |
0.0.7 | 2017-07-09 | 增加alias配置支持 |
0.0.8 | 2017-07-14 | 增加方向代理功能 |
0.0.9 | 2017-07-15 | 增加hbs helper 入口 |
0.0.11 | 2017-07-19 | 增加拷贝压缩包功能 |
0.0.12 | 2017-07-20 | 解决混淆代码ie8下报错问题 |
0.0.13 | 2017-07-21 | 增加connect 下新命令入参数--apps,解决开发时编译过慢问题 |
- 注:配置文件会随框架下载时配置好,一般不需要修改