搭建一个开发 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 版本中提供的脚手架;

image.png

搭建过程

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


具体创建过程如下图:

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

image.png

注意事项

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

结语

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

文档一

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

文档二

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

阅读 280

推荐阅读