搭建一个开发 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 中写使用文档。
搭建方式
经过一番折腾和研究,发现搭建起工程有两种方式,
- 参照视频教程,从零开始搭建;
- 使用 umi v2 版本中提供的脚手架;
搭建过程
至于第一种方式我不过多阐述,照着视频即可,在此更多的是说第二种方式:使用 umi v2 提供的脚手架。
具体创建过程如下图:
其中有几个选项,可自行根据情况选择或填写。
注意事项
使用 umi 脚手架搭建的 father 依赖版本是 2.16.0,估计是阿里的人懒得维护升级了,不过我自行尝试过升级,可正常启动、打包。
结语
剩下的就是自行根据 github 仓库的 issue 、作者的视频教程和官方文档进行探索了。
文档一
https://github.com/umijs/father/blob/2.x/README.md