lenz-react

0.0.1 • Public • Published

lenz-reactTool

构建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 查看当前版本号

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.jsondevserver增加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,解决开发时编译过慢问题
  • 注:配置文件会随框架下载时配置好,一般不需要修改

Readme

Keywords

none

Package Sidebar

Install

npm i lenz-react

Weekly Downloads

1

Version

0.0.1

License

ISC

Unpacked Size

29.7 kB

Total Files

9

Last publish

Collaborators

  • zhanglizhao