README

react-lighter

to initialize your react project as simple as lighting a fire

初始化 react H5 项目

技术栈

react + mobx + router + antd + axios

目录结构

├── src // 项目主目录
│   ├── assets
│   ├── components // 可重用组件
│   ├── index.tsx
│   ├── interface.ts
│   ├── mobx // mobx 注入工具
│   ├── pages // 项目界面
│   │   ├── 404
│   │   └── Example
│   ├── routes
│   ├── tools // 脚手架
│   ├── utils
│   └── websocket
└── config // webpack 配置

运行

yarn or npm i

yarn dll

yarn start // for dev

yarn build && yarn server // for prod

特点

一、热加载

采用 react-hot-loader 配合 babel，可实现样式替换、节点改变不影响 state 等功能，达到局部热加载的效果

二、抽离 dll

使用 webpack.DllReferencePlugin 插件，先把 react 抽离成 dll，在后续开发中能更快加载

三、多线程打包

使用 happypack 启动多线程，实现光速打包

四、css 处理

使用 postcss 提供样式兼容
使用 mini-css-extract-plugin 抽离 css
使用 purgecss-webpack-plugin 去除无用 css
使用 postcss-px-to-viewport 规范长度单位

五、mobx 注入

参考：

mobx 分层：views、actions、stores

views 派发 actions，由 actions 做逻辑处理后调用 stores 做数据持久化，views 通过注入的 stores 获取到最新的数据。典型的 MVC 架构

解决了 mobx 中数据随处可定义、逻辑交互方法随处可声明等问题

唯一数据源

每个 view 绑定 store 数据源，顶层 view 保存着全局数据源，类似于 redux 的 createStore 机制

实现了 stores 间交叉引用的可能，同时能够达到 redux 中 initialState 的“数据恢复”机制

按需实例化

通过 ts-plugin-mmlpx 插件，实现 stores 和 actions 的自动查找和绑定、通过 Object.defineProperty 实现按需实例化，提高性能

tools 脚手架使用

参考：mobx example 开发章节

添加界面 node src/tools/add-page.js -m APage

添加子界面 node src/tools/add-page.js -m APage/AInnerPage

删除界面 node src/tools/rm-page.js -m APage/AInnerPage

添加组件 node src/tools/add-page.js -c ACom

六、Axios 封装

参考：

axios restful 封装

将 axios 进行 restful 风格的封装，配合 interceptor 和 history 进行权限验证和跳转

使用：

GET /users/:id

request.setPath('users').get({ uri: 'lawler' })

POST /users

request.setPath('users').post({
  data: { email: 'lawler61@163.com', password: '123456' }
})

PUT /users/:id

request.setPath('users').put({
  uri: 'lawler', data: { name: 'jeffery' }
})

DELETE /users/:id

request.setPath('users').delete({ uri: 'lawler' })

GET /users/:id/articles?page=2&limit=10

request.setPath('users/{id}/articles').replace('lawler').get({
  query: { page: 2, limit: 10 }
})

PATCH /users/:id/articles/:id

request.setPath('users/{id}/articles/{id}').replace('lawler', 'react 学习之路').patch({
  data: { title: '前端学习' }
})

项目展示

录屏

Usage no npm install needed!