首页 > 其他 > 详细

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

时间:2020-09-13 21:35:55      阅读:46      评论:0      收藏:0      [点我收藏+]

前言

公司项目需要开发一套 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/#/

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

原文:https://www.cnblogs.com/blueju/p/13662338.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!