一个Mobx版的Antd Pro

作者: gzgogo | 来源:发表于2018-12-25 16:35 被阅读2次

    一个精简版的基于 mobx 的 Antd Design Pro:antd-pro-mobx

    预览

    为什么做这个项目?

    Antd Design Pro 是一个大而全,且高度封装的脚手架,帮开发者做了很多基础工作,但不免提升了学习成本, 尤其内部依赖了dvaumi,限制住了开发者的同时也让开发者失去了对 webpack 的绝对控制权。所 以我利用业务时间做了这个基于mobx的精简版antd pro,简化了登录注册流程,将dva换成了class based 的mobx,使代码结构更清晰更易组织,去掉了底层 umi,使用者可以直接控制 webpack,更灵 活,降低了学习成本,开发者可以快速上手,投入进业务开发。且内置了友盟统计,可以看到网站的 基本使用情况并使用高级分析,分群,画像,推送等高级功能。目前已有两家企业基于此开发并上线。

    适合哪些人使用?

    1. 不喜欢dva,更喜欢用基于类的mobx做状态管理
    2. umi框架不熟悉,更想直接操作webpack
    3. 前期不需要适配手机端,希望PC版尽快上线

    相比Antd Pro,去掉了哪些东西?

    1. 状态管理从dva换成了mobx
    2. 去掉了umi,改成了直接操作webpack
    3. mock改用阿里推出的 rap2
    4. 去掉了手机端的适配,方便快速完成PC版
    5. 去掉了测试相关的东西
    6. 去掉了多语言相关的东西

    此项目的目的是帮助开发者尽快完成PC网站的开发,去掉的东西后期如果需要,可以参考Antd Pro 项目逐渐迭代回去。

    相比Antd Pro,做了哪些改进和补充?

    1. CSS Modules使用了react-css-modules方案,相比css-loader的modules方案更灵活。
    2. 增加了异步路由,方便首页做进一步优化。
    3. 增加了OSS上传组件,使用STS方案上传,需要开发者自行购买资源。
    4. 图表库由BizChart改用了highcharts,这个算不上优化,但是相对于阿里外的开发者highcharts可能更好用一些

    有哪些地方可以完善?

    1. 登录目前只有手机号+验证码直接登录,可以补充其他登录方式,但与此同时,你还要提供注册+密码找回+修改密码
    2. 目前路由已经收敛进一个组件,但还不够集中,最好可以像router3一样集中管理(请不要问我为什么不直接用router3…,不做怎么知道后悔)
    3. CSS Modules使用了react-css-modules方案,相比antd pro更灵活了一些,但是babel-plugin-react-css-modules应该是更好的方案,这样css就相对于js透明了
    4. 分包方案:目前提供了同步路由和异步路由两种方式,欢迎这方面的大牛进一步改进。同时分包依赖业务,针对业务应该会有更优的分包方案。
    5. 肯定还有很多我未想到或发现的,欢迎各位大神指点并贡献代码,我会积极merge大家的pr。

    主要的依赖及版本

    1. webpack 4
    2. router 4
    3. react 16
    4. mobx 5
    5. axios
    6. antd + ant-design-pro
    7. ali-oss 6

    相关文章

      网友评论

        本文标题:一个Mobx版的Antd Pro

        本文链接:https://www.haomeiwen.com/subject/pcbzkqtx.html