在專案開發過程中,如何多人維護一個被多個專案使用的公共元件庫的管理方案
簡介
最近因為公司業務需求,要對專案元件庫作為一個獨立的專案庫來維護,但是又不影響現有目錄結構並且要易於日常多專案共同開發使用。
例如目前有A、B、C、D四個專案,每個專案都有一個元件庫,但是每個元件庫的元件其實是有相當一部分是重複的,因此想將元件提取出來作為一個單獨的專案庫來維護,
避免每次更新元件都要到四個專案都改一遍。
在需求分析過程中考慮了兩種方案:一種是Npm 私庫
,一種是Git Subtree
。下面會具體講作用、優缺點及使用方法。
在需求的實現過程中覺得此需求非常有普遍意義,因此將本次實現歷程整理分項出來,供大家最為相關業務需求時的小小參考。
git Subtree用來拆分巨石應用倉庫也十分有效。
PS:本人github,歡迎交友
工程環境
+ Node
+ Vue專案(不限制必須是vue)
+ 使用Git管理專案(必要) 【 git Subtree 】
+ Verdaccio & pm2 【 npm私庫 】
複製程式碼
需求分析
- 多個專案共同開發,但是依賴某些相同的元件
- 在不同專案修改元件要自動同步到所有專案
- 要易用安全,並且儘可能的節省開發過程中的時間,不能增加學習成本或時間成本
方案一:Npm私庫
在日常開發中我們都install過無數個輪子,很好的解決了日常專案工作中可能會用到很多通用性的程式碼,比如,框架類、工具類以及公用的業務邏輯程式碼等等,如果npm庫裡有解決方案,我們就可以很開森的用輪子啦,但是npm的性質是開源的,總有一些業務是私密程度比較高的或者公司壓根就不允許將程式碼開源的,這時候就需要在公司伺服器架設自己的npm私有倉庫了。 相關知識:製作併釋出一個npm外掛 作者:Y2sh
優點
- 和日常npm install操作相同,簡單易用
- 一次架設成本,後續直接使用即可,人員更換及人員水平變動沒有影響
- 元件修改釋出後,所有專案都能使用,並且可以指定版本
缺點
- 日常開發不便,需要將元件更新發布任何專案更新元件版本後才能看到效果
Npm私庫使用教程 作者:Better
方案二:Git Subtree
git subtree是git的一條子命令,我們不用關注它具體釋義是什麼(參考百科),我們只討論如何使用它來滿足我們的需求。 Git Subtree可以將我們現在的工程目錄中,選擇我們指定的資料夾將其變成子倉庫,這樣這個目錄就可以作為一個獨立倉庫推送到其它專案倉庫中,來滿足多個專案使用同一個元件庫的目的。並且它關聯到其他專案指定目錄後,每個專案下的元件目錄更新推送,其他專案都會收到更新。
優點
- 跟git的多人協作同理,關聯後一個專案更新所有專案都可以收到推送
- 無需更改現有工程目錄
- 元件更新所見即所得,除錯效果拉滿
缺點
- 多人協作,多專案關聯,隨意性較高,可能改本專案無意間影響了所有專案,因此使用必須給所有成員做培訓說明
- 必須是使用git管理的專案
- 需要一定git相關知識,並且命令較長相對複雜
使用方式說明
```
demo
|---- app1
|--- components
|---- app2
|--- components
```
複製程式碼
當倉庫中衍生出多個專案時,那麼多個專案必定有一部分元件庫、樣式庫、工具類等是需要重複使用的。這個時候想把這部分抽離出來供多個專案共通使用時改怎麼做?
百度大多是拆分倉庫下子目錄為子倉庫,並且喜歡起同名造成迷惑性,這裡詳細講解一下子元件庫的拆分方式。
步驟如下:
1. 拆分倉庫
進入倉庫根目錄
git subtree split -P ./app1/components -b public-lib
```
2. 建立新倉庫資料夾,並初始化git
```
mkdir public-lib
cd public-lib
git init
```
3. 拉取倉庫程式碼到新的元件倉庫!
```
git pull ../../demo public-lib
"../../demo" 是原項倉庫目錄,因為拆分時已經指定了拆分路徑,這裡注意要寫的是原倉庫.git檔案存在的位置
"public-lib" 是新倉庫名字
注意:這麼寫是為了直觀說明這句話都時什麼意思,即從 原倉庫 拉取到 新倉庫
複製程式碼
Git Subtree說明 作者:好好程式設計
Git Subtree操作教程 作者:庫機戴娃
最終方案
考慮到上述兩種方案的優缺點,最終決定在開發階段使用Git Subtree
來管理維護元件庫,上線後考慮使用Npm私庫
管理。作者在嘗試了兩種方案後選擇了以上三個教程作為案例分享,描述都比較詳細或者直接明瞭(如有侵權,請聯絡作者刪除)。