搭建一個開發 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/#/


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM