一个Mobx版的Antd Pro
2018-12-25 本文已影响2人
gzgogo
一个精简版的基于 mobx 的 Antd Design Pro:antd-pro-mobx
为什么做这个项目?
Antd Design Pro 是一个大而全,且高度封装的脚手架,帮开发者做了很多基础工作,但不免提升了学习成本, 尤其内部依赖了dva
和umi
,限制住了开发者的同时也让开发者失去了对 webpack 的绝对控制权。所 以我利用业务时间做了这个基于mobx
的精简版antd pro,简化了登录注册流程,将dva
换成了class based 的mobx
,使代码结构更清晰更易组织,去掉了底层 umi,使用者可以直接控制 webpack,更灵 活,降低了学习成本,开发者可以快速上手,投入进业务开发。且内置了友盟统计,可以看到网站的 基本使用情况并使用高级分析,分群,画像,推送等高级功能。目前已有两家企业基于此开发并上线。
适合哪些人使用?
- 不喜欢
dva
,更喜欢用基于类的mobx
做状态管理 - 对
umi
框架不熟悉,更想直接操作webpack - 前期不需要适配手机端,希望PC版尽快上线
相比Antd Pro,去掉了哪些东西?
- 状态管理从
dva
换成了mobx
- 去掉了
umi
,改成了直接操作webpack - mock改用阿里推出的 rap2
- 去掉了手机端的适配,方便快速完成PC版
- 去掉了测试相关的东西
- 去掉了多语言相关的东西
此项目的目的是帮助开发者尽快完成PC网站的开发,去掉的东西后期如果需要,可以参考Antd Pro 项目逐渐迭代回去。
相比Antd Pro,做了哪些改进和补充?
- CSS Modules使用了react-css-modules方案,相比css-loader的modules方案更灵活。
- 增加了异步路由,方便首页做进一步优化。
- 增加了OSS上传组件,使用STS方案上传,需要开发者自行购买资源。
- 图表库由
BizChart
改用了highcharts
,这个算不上优化,但是相对于阿里外的开发者highcharts
可能更好用一些
有哪些地方可以完善?
- 登录目前只有手机号+验证码直接登录,可以补充其他登录方式,但与此同时,你还要提供注册+密码找回+修改密码
- 目前路由已经收敛进一个组件,但还不够集中,最好可以像router3一样集中管理(请不要问我为什么不直接用router3…,不做怎么知道后悔)
- CSS Modules使用了react-css-modules方案,相比antd pro更灵活了一些,但是babel-plugin-react-css-modules应该是更好的方案,这样css就相对于js透明了
- 分包方案:目前提供了同步路由和异步路由两种方式,欢迎这方面的大牛进一步改进。同时分包依赖业务,针对业务应该会有更优的分包方案。
- 肯定还有很多我未想到或发现的,欢迎各位大神指点并贡献代码,我会积极merge大家的pr。
主要的依赖及版本
- webpack 4
- router 4
- react 16
- mobx 5
- axios
- antd + ant-design-pro
- ali-oss 6