如何构建 React 移动端 UI 库

如何构建 React 移动端 UI 库

技术杂谈小彩虹2021-08-22 6:01:58430A+A-

废话不多说先看图:

文档地址, 还未彻底完成,可以先看看

是个人都能看出来这个界面跟 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-iconfontgulp-iconfont-css 直接将 .sketch 生成引入 iconfont.css 文件。 之后在 Icon 组件引入即可。

总结

这个UI库所有的组件都是使用的 React Hook的方式编写,所以无法兼容太低版本的React。中间也遇到很多问题,给自己也做到了很大的学习和提升的机会。

其实我很喜欢这种从0到1的过程,它能把所有的知识点都串联起来,对于一个有技术追求的人来说,这是个非常享受的经历。

还有就是其中的代码大量借鉴(抄袭)了 Vant, 请各位大佬不要喷我,主要 Vant做的实在太好了,不抄白不抄嘛...

代码地址

说半天不放代码跟刷流氓没啥区别,请各位大佬访问 github.com/Hyattria/ro… , 目前才20来个组件,所以阅读起来应该没有太复杂,希望能对有共同需求的小伙伴有一点点的帮助,最后就是,跪求 star~~

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示 | 支付宝红包
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们