lenz-brush

typescript project webpack build tools

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

功能一览

创建项目

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

编译预览

• [x] 轻量组件化功能

• [x] 本地预览

• [x] 数据模拟

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

安装

基于node，请确保已具备较新的node环境（>=6.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"
}

版本更新日志

版本|时间|更新内容 -----|:--|:-- 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，解决开发时编译过慢问题

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