废话不多说先看图：
是个人都能看出来这个界面跟 Vant 一毛一样，请原谅本人没啥美术文化，国家大力发展的九年义务教育我是只学会了抄袭 😢
前言
由于团队目前是TOC场景，并且使用的是React 技术栈。而在 UI 的选择上出现了困难，之前一直使用的是 Ant Design Mobile, 而使用下来很多地方不能尽如人意，所以在自我驱动的状态下，开始着手想做一个自己团队的 UI 组件库，正好一直以来自己也喜欢做这些对业务来说吃力不讨好的事。
这里只能大概讲下这个过程，很多细节东西如果想知道可以直接翻看源码，现在的项目还很小，只有20多个组件，对于有这方面想法的同学来说希望能帮到你。当然如果觉得项目很烂也很欢迎各位大佬来喷我, 只要能进步，摆啥姿势都行 😛😛
介绍
结构
其实说到移动端的UI库，最先联想到的就是有赞的Vant, 虽然它是Vue的，但框架其实都是差不多的，而接下来的过程就简单了，拿过来照抄不误......
翻阅了Vant的源码之后，大概心里有了一些结构。Vant不仅仅只包含每个组件的代码，它除了组件代码之外还有比如 组件文档，命令行工具，规范定义，webpack 插件 等等一些东西。所以站在巨人的肩膀上之后，我决定也自己搞一搞
整个项目的结构大概像这样
rokku
├─ docs # 文档
├─ src # 组件
├─ packages # 子包
├─ cli # 命令行工具
├─ fabric # 代码规范
├─ icon # 图标库
├─ markdown-loader # 自定义 loader
└─ touch-emulator # 模拟触摸事件
├─ test # 单测
└─ typings # 类型
而每个组件的结构如下所示
src
└─ button
├─ demo # 示例代码
├─ __test__ # 单元测试
├─ index.js # 组件入口
├─ style/index.less # 组件样式
├─ README.md # 中文文档
└─ README.en-US.md # 英文文档
文档
我跟其他的不太一样，我最先想到的是如何做文档，而不是一开始就写组件的代码。因为好用的组件库肯定是有个非常棒的文档说明，不然没人会乐意用这玩意的。
所以说到移动端的文档，其实就是比PC的文档多一个浮动预览组建的区域，就跟模拟器的手机界面一样。而通常的做法也很简单，就是单独写文档的页面，然后在跑本地命令的时候，打包成双页面应用，而浮动的预览界面通过 iframe 内嵌，再加入两者之间的一些消息传递即可。
而中间的文档说明，则是通过遍历读取每个文件下的 README.md，之后用上面说的自定义 loader 转译成 React 组件，每个文档用路由引入即可。而每个组件下的 demo 文件夹下的代码则对应的最右侧预览图的内容。
另外在根目录会用一个配置文件，文档用的路由配置的生成都是基于这个文件，具体的细节可以直接查看代码。
打包
打包的操作主要就是利用上面说的 cli 命令行工具 完成， 开发环境的过程就是生成文档的过程，上面已经大致介绍了。现在主要说的是生产环境的打包过程。这方面跟Vant做的不一样。主要是利用了 gulp 以及它的一些插件进行的操作，因为中间有很多除了转译代码之外的一些包括文件改动的操作。
首先就是 typescript 的校验，less 文件的转译，之后再是 babel 转译代码，其中有一些优化的细节，尽量避免转译后的文件过大的问题。
除了文件的转译处理之外，还有一个处理，就是为了能实现按需加载和主题定制，把每个组件所用到的 css 包括组件间互相依赖可能会用到其他组件的 css 整合成 style/index.js 文件和 style/less.js
实现细节
如何自动生成文档？
上文已简单介绍了下，下面说的稍微具体些。
一. 根目录下有个唯一的配置文件 rokku.config.js, 其中有 nav 配置项对应的是文档显示的所有组件，通过它会在打包时生成路由配置文件，由它来生成文档应用。
二. 每个组件下的 README.md 是中间的组件说明部分，当然.md文件是不能直接显示的，所以这里需要写一个自定义的 webpack的插件。它的作用主要是在打包过程中，检索 src 下所有组件的 README.md 文件，之后生成一个新的文件用来导出这些内容。
三. 单独写文档的应用代码，引入上面说的文件，把文档当成路由配置的 component
四. 自定义 loader, 用来把 .md 转成 react组件, 这里其实没做啥，就是使用了 markdown-it 工具而已。另外就是些代码高亮和样式的一些修改
如何预览 demo？
这里的实现跟上文差不多，使用自定义的 webpack插件 查询 demo 下的文件并导出，下面的操作也是一样，单独写预览端的应用代码，引入后生成路由配置，再跟之前的桌面端的应用使用 iframe 内嵌并加上一些消息传递的操作，路由切换时保持一致。
图标如何处理？
图标一直是组件库的比较麻烦的点，打包到库里面也觉得非常的费事而且占据太大的体积。这里我是直接照抄的Vant的做法（其实其他的也都抄了），直接通过 gulp-iconfont 和 gulp-iconfont-css 直接将 .sketch 生成引入 iconfont 的 .css 文件。 之后在 Icon 组件引入即可。
总结
这个UI库所有的组件都是使用的 React Hook的方式编写，所以无法兼容太低版本的React。中间也遇到很多问题，给自己也做到了很大的学习和提升的机会。
其实我很喜欢这种从0到1的过程，它能把所有的知识点都串联起来，对于一个有技术追求的人来说，这是个非常享受的经历。
还有就是其中的代码大量借鉴（抄袭）了 Vant, 请各位大佬不要喷我,主要 Vant做的实在太好了，不抄白不抄嘛...
代码地址
说半天不放代码跟刷流氓没啥区别，请各位大佬访问 github.com/Hyattria/ro… ， 目前才20来个组件，所以阅读起来应该没有太复杂，希望能对有共同需求的小伙伴有一点点的帮助，最后就是，跪求 star⭐️⭐️~~
