搭建一个开发 UI 组件库的工程

前言

公司项目需要开发一套 UI 组件库，提供给其他项目组使用，技术栈是 React，因此选用了 alibaba 的 father，它已经帮我做了目录规范、文件规范、打包配置、配套文档、UI组件测试等一系列工作，并提供了一个简单 UI 组件库示例，供使用者参考。


father，前身的是 umi-plugin-library。


father：https://github.com/umijs/father
umi-plugin-library：https://github.com/umijs/umi-plugin-library


umi 作者 sorrycc 录制的视频使用教程：
https://www.bilibili.com/video/av47853431

搭建工程

在 father 的 github 仓库中，它并没有提供搭建教程或脚手架，而是直接在 README.md 中写使用文档。

搭建方式

经过一番折腾和研究，发现搭建起工程有两种方式，

1. 参照视频教程，从零开始搭建；
2. 使用 umi v2 版本中提供的脚手架；

搭建过程

至于第一种方式我不过多阐述，照着视频即可，在此更多的是说第二种方式：使用 umi v2 提供的脚手架。


具体创建过程如下图：

其中有几个选项，可自行根据情况选择或填写。

注意事项

使用 umi 脚手架搭建的 father 依赖版本是 2.16.0，估计是阿里的人懒得维护升级了，不过我自行尝试过升级，可正常启动、打包。

结语

剩下的就是自行根据 github 仓库的 issue 、作者的视频教程和官方文档进行探索了。

文档一

https://github.com/umijs/father/blob/2.x/README.md

文档二

https://umijs.github.io/umi-plugin-library/#/