基于create-react-app 2.0构建前端框架 新手必
开箱即用，容易理解，更适合小白使用开发学习
mobx 简介
和 redux 类似，mobx 是一个数据管理库，都可以和 react 配合使用。它区别于 redux 的最大特点是，可以直接修改数据，对 UI 进行精确刷新
使用 mobx 时，借鉴了 redux 架构的优点：
- 单一数据源，这样避免了子组件、父组件状态同步的问题
- 可以做到让组件无状态化
- 使用
Provider注入，让storeactions可以在子组件中，通过props访问使用
下面是一些不同点：
- mobx 使用的是
@inject装饰器语法注入，redux 使用的是connect语法注入 - mobx 使用
@observer语法，让一个component能响应store字段更新 - mobx 会动态精确绑定数据字段和对应 component 关系， redux 使用 connect 参数手动控制传递哪些字段
- mobx 直接修改
store的状态，但是必须在@action修饰的函数中完成，@action的语义，表示这是一个修改状态的操作 - redux
Provider传递store是强约定，mobxProvider灵活传递storeactions，也可以是其它名字，比如 db - redux 使用了比较难以理解的高阶函数和参数
connectcombineReducersbindActionCreatorsmapStateToPropsmapDispatchToProps，mobx 方案，除了使用decorator语法，没有其它让人感觉理解困难的函数。 - redux 引入了数据流，mobx 没有数据流的概念，通过
actions直接改变数据
编码工作量对比
代码功能少，感觉不到差别，好像就是 redux 方案有点难理解；而 mobx 比较直接，也比较 magic，就像当年刚开始使用 jQuery 的感觉。
mobx 在大项目中的扩展能力
redux 方案，本质上还是通过添加更多的 switch 语句来实现扩展，将 store 分支节点的 reducer 分散到不同的文件，再通过工具函数combineReducers 合并成一个 rootReducer。
mobx 方案的扩展非常简单，需要扩展 store 和 actions。并且，actions 和 store 的扩展方式完全一致，通过给父类添加成员
下载地址:
https://github.com/wulibaibao/react-antd-demo
已支持：
- mobx ———— mobx进行状态管理
- React-router-dom ———— React路由体系
- Antd ———— 使用antd学习开发后台管理系统
- React-loadable ———— import()动态加载的支持
- webpack打包优化 ———— build包更小
- fetch ———— 数据请求
- Scss ———— css 预处理
- 登录验证
- 支持装载ES7（装饰器）
- Express
- Webpack 4.0
- create-react-app 2.0
即将支持：
- IE兼容
- 接口
- nginx
- gzip
- typescript
快速开始
install
yarn install or npm install
建议使用yarn
npm install yarn -g
start
yarn start
默认端口：3000
修改默认端口
方法一
"start":"set PORT=3535 && node scripts/start.js"
方法二
/*
自行安装包 yarn add cross-env
*/
"start":"cross-env PORT node scripts/start.js"
webpack proxy
转发配置package.json中的proxy
yarn start
build
yarn build
具体修改点：
webpack.config.dev.js && webpack.config.prod.js
- 新增方法
+ function resolve (dir) {
+ return path.join(__dirname, '..', dir)
+ }
- resolve -> alias 新增
+ '@':resolve('src'),
webpack.config.prod
- externals
externals 配置选项提供了「从输出的 bundle 中排除依赖」的方法。
+ externals: {
+ 'react': 'React',
+ 'react-dom': 'ReactDOM',
+ 'mobx' : 'mobx',
+ 'react-router-dom':'ReactRouterDOM',
+ 'mobx-react':'mobxReact',
+ 'moment':'moment',
+ 'antd' : 'antd',
+ },
- devtool
此选项控制是否生成，以及如何生成 source map。
- devtool: shouldUseSourceMap ? 'source-map' : false,
+ devtool: false
package.json -> proxy
如果你有单独的后端开发服务器 API，并且希望在同域名下发送 API 请求 ，那么代理某些 URL 会很有用
+ "proxy":{}
public -> index.html
HtmlWebpackPlugin 你可以让插件为你生成一个HTML文件，使用lodash模板提供你自己的模板，或使用你自己的loader。
+ <%if(process.env.NODE_ENV === 'production') {%>
+ <script src="%PUBLIC_URL%/lib/react.production.min.js"></script>
+ <script src="%PUBLIC_URL%/lib/react-dom.production.min.js"></script>
+ <script src="%PUBLIC_URL%/lib/react-router-dom.min.js"></script>
+ <script src="%PUBLIC_URL%/lib/mobx.umd.min.js"></script>
+ <script src="%PUBLIC_URL%/lib/mobx-react.min.js"></script>
+ <script src="%PUBLIC_URL%/lib/moment.min.js"></script>
+ <script src="%PUBLIC_URL%/lib/antd.min.js"></script>
+ <%}%>
app.js
const path = require('path')
const express = require('express')
var app = express()
// 静态文件资源，做静态文件服务器，js、css、html资源等
const projPath = process.cwd()
// js,css资源
app.use( `/` , express.static( path.join(projPath, 'build') ) )
app.get( `*` , ( req , res ) => res.sendFile(path.join(__dirname, 'build', 'index.html')) )
// 修改侦听服务器端口
const port = 2001
app.listen(port)
console.info(`Listen on Port ${port}`)
over!
希望喜欢
喜欢请关注个人博客！
blog address : https://www.wulibaibao.com/
简书地址：
https://www.jianshu.com/u/bc0ac5b86f32
联系我！
QQ ：381477703
mobx介绍部分引文: http://imweb.io/topic/59f4833db72024f03c7f49b4
