基于webpack+react+tinper-bee搭建基本快速开发脚手架并使用强大的集成开发工具 uba
-
基于tinper-bee组件库编写的admin实例工程。
-
依赖于前端集成开发工具 uba ，项目生成的时候需要安装全局工具命令来使用，参与开发人员无需重复安装全局使用。
-
集成市面上常规的使用插件等配置，可以满足常规开发需求，无需繁琐复杂的配置项，简单、干净、舒服。
-
依赖强大的集成开发工具
uba内置数据模拟、代理请求、静态托管、开放配置等功能. -
方便开发人员在快速搭建
react前端开发项目，无需学习复杂配置环境，拆箱即用.
-
安装
uba命令：npm install uba -g. -
执行
uba命令来查看帮助. -
生成本脚手架 命令：
uba init选择template-tinper-bee-admin回车继续等待安装即可。(可以使用默认的npm来安装，也可以手动后续来安装) -
启动开发
npm run dev,稍等片刻会自动打开默认浏览器显示. -
开发完毕后，使用命令
npm run build来产出所需的静态资源依赖文件. -
享受集成开发工具
uba给你带来的方便体验来开发吧！
react、react-dom、webpack3.babel、ES5\6、postcss、Less、图片处理、字体处理、热部署.
├── assets
│ └── README.md
├── components
│ ├── EditTableCell
│ │ ├── index.css
│ │ └── index.jsx
│ ├── Header
│ │ ├── index.css
│ │ └── index.jsx
│ ├── Loading
│ │ ├── index.css
│ │ └── index.jsx
│ ├── LoadingTable
│ │ ├── index.css
│ │ └── index.jsx
│ ├── Menus
│ │ ├── index.css
│ │ └── index.jsx
│ ├── MyComponent
│ │ ├── index.css
│ │ └── index.jsx
│ ├── SimpleReference
│ │ ├── index.css
│ │ └── index.jsx
│ └── index.js
├── containers
│ ├── App
│ │ ├── index.css
│ │ └── index.jsx
│ ├── Dashbroad
│ │ ├── index.css
│ │ └── index.jsx
│ ├── DataTable
│ │ ├── index.css
│ │ └── index.jsx
│ ├── Editor
│ │ ├── index.css
│ │ └── index.jsx
│ ├── Reference
│ │ ├── index.css
│ │ └── index.jsx
│ ├── UserManager
│ │ ├── index.css
│ │ └── index.jsx
│ └── index.js
├── index.html
├── index.js
├── lib
│ └── index.js
├── redux
│ ├── configureStore.js
│ └── reducers.js
├── routes
│ └── index.js
└── serve
└── index.js
项目核心文件uba.config.js里面包含所有的配置，主要是基于webpack3配置，修改需谨慎。
数据模拟配置文件uba.mock.js可以配置需要模拟的请求方式，简单易懂，默认带完整配置。支出8种请求模式(OPTIONS,HEAD,GET,POST,PUT,DELETE,TRACE,CONNECT)
- 服务器IP或端口冲突需要修改：
//服务启动设置
const svrConfig = {
host: "127.0.0.1",
port: 3000
};- 代理服务的设置：
如下配置，
proxyConfig是一个数组对象参数，可以配置多个，当enable:true的时候，启用该代理功能，router:"proxy"代理的路径是哪个，当配置成proxy的时候，访问我们的项目http://127.0.0.1:3000/proxy/你的代理路径资源地址这样来访问就可以了。 例子里面的地址是url:"cnodejs.org"，远程的接口访问是：http://cnodejs.org/api/v1/topics；本地代理过去访问地址就是：http://127.0.0.1:3000/proxy/api/v1/topics，也可以去掉proxy这个代理路由，但是这样会导致路由跟现有的项目冲突，这样会有问题的。最好在请求数据的时候去配置一个可控制的参数来切换数据模拟和代理线上的问题。
当有需要排除不需要代理的情况，可以设置filter该参数，来编程去实现哪些资源是走代理，哪些不走代理。具体需要查询文档proxy
//远程代理访问，可以配置多个代理服务
const proxyConfig = [{
enable: true,//true启用代理,mock服务失效.
router: "/proxy",//代理本地对外的路径
url: "cnodejs.org",
options : {
filter : function(req,res){
return (req.url.indexOf("webpack_hmr") > -1 ? false : true);
}
}
}];- 如何开启静态资源托管：
//静态服务托管
const staticConfig = {
folder: "src/static"
};找到该配置，直接设置src/static文件夹为直接对外开启静态目录功能，不受webpack影响，单独存在的，访问资源地址是：http://127.0.0.1:3000/js/demo.js，访问到的资源：src/static/*下的所有资源。
- 不想配置模拟数据路由直接访问
mock下的json:
uba-server插件默认加载根目录mock文件夹内的资源托管，可以直接访问里面的json文件。http://127.0.0.1:3000/api/user/get.json->./mock/api/user/get.json。
devConfig是开发环境，是给uba-server插件读取用的，prodConfig是生产环境，是给uba-build构建资源读取用的。