在大型項(xiàng)目中如何使用Git子模塊開發(fā)，看完漲姿勢(shì)了！
寫在前面
公司需要開發(fā)一個(gè)內(nèi)部系統(tǒng)，要求每個(gè)部門都要接入。老板欽點(diǎn)，工期又壓得短，于是浩浩湯湯的上百人就調(diào)過來了。
再簡(jiǎn)單的事情，只要人多起來就會(huì)變得復(fù)雜，開發(fā)的世界也是如此。
痛點(diǎn)
一個(gè)幾百人的大項(xiàng)目，使用Git協(xié)作的時(shí)候，想一想我們的痛點(diǎn)：
- 項(xiàng)目過大，每個(gè)人clone等待時(shí)間過長(zhǎng)
- 一會(huì)沒有拉取代碼就會(huì)發(fā)現(xiàn)有上百條更新待拉取
- 一人提交出錯(cuò)，上百人待機(jī)（筆者真實(shí)體驗(yàn)）
- 代碼回溯困難，查找具體的修改記錄無異于大海撈針
解決方案
這時(shí)候Git子模塊就派上用場(chǎng)。
首先需要的當(dāng)然是一個(gè)合理的架構(gòu)，由于公司的保密原則這里就不貼項(xiàng)目了，本文主要描述在協(xié)作中子模塊的用法。
項(xiàng)目結(jié)構(gòu)
項(xiàng)目主體結(jié)構(gòu)大概是這樣的：
- └── src
- ├── layout // 公共布局目錄
- ├── public // 公共頁面目錄
- ├── router // 路由入口
- ├── components // 通用組件
- ├── modules // 模塊項(xiàng)目開發(fā)目錄（子模塊）
- | ├── tms // 子模塊必須
- | │ ├── components // 模塊通用組件
- | │ ├── pages // 模塊頁面
- | │ ├── router // 模塊路由
- | │ └── store // 模塊vuex數(shù)據(jù)
- | └── ... // 各子模塊
- ├── app.vue // 跟組件
- └── main.js // 項(xiàng)目入口
一個(gè)部門一個(gè)子模塊，每個(gè)子模塊必須包含master（生產(chǎn)）、dev（開發(fā)）分支（推薦 gitflow 工作流）。
開發(fā)流程
克隆項(xiàng)目
如所有的webpack項(xiàng)目一樣，src只是業(yè)務(wù)代碼，開發(fā)配置都放在src外層，所以跑起開發(fā)環(huán)境首先需要克隆主項(xiàng)目。
- $ git clone https://github.com/test/main.git
添加子模塊
當(dāng)然我們一般不用master分支做開發(fā)，正確的姿勢(shì)是clone項(xiàng)目之后馬上切換到基于dev的開發(fā)分支（原則上業(yè)務(wù)組不需要關(guān)注主項(xiàng)目的開發(fā)，主項(xiàng)目由架構(gòu)組負(fù)責(zé)，但是為了保證代碼的最新，并且將子模塊添加合并進(jìn)dev分支中，所以切換到主分支dev）。
- $ git checkout -b dev origin/dev
這時(shí)候如果你的項(xiàng)目中已經(jīng)有子模塊了，你會(huì)發(fā)現(xiàn)modules文件夾下已經(jīng)有了一個(gè)個(gè)子模塊，但是顯然現(xiàn)在這些模塊都是空目錄（預(yù)期的結(jié)果，我們不需要關(guān)注其他模塊）。同時(shí)項(xiàng)目根目錄下有一個(gè).gitmodules文件，內(nèi)容如下：
- [submodule "modules/suba"]
- path = modules/suba
- url = https://github.com/test/suba.git
這里就是你的子模塊關(guān)聯(lián)文件，每添加一個(gè)子模塊就會(huì)新增一條記錄，如果是第一次添加Git子模塊會(huì)自動(dòng)生成。
開發(fā)環(huán)境有了，現(xiàn)在需要關(guān)聯(lián)你的子模塊：
- $ git submodule add https://github.com/test/subb.git modules/subb
首次添加的子模塊會(huì)拉取整個(gè)項(xiàng)目，打開muodules/subb文件夾，整個(gè)子模塊項(xiàng)目都完好地列在那里，同時(shí).gitmodules里新增了一條子模塊記錄modules/subb。
編輯子模塊
同樣的，我們也不應(yīng)該在子模塊的master分支上做任何編輯，這時(shí)候我們需要將子模塊切換到基于dev的開發(fā)分支。
進(jìn)入子模塊目錄下：
- $ cd modules/subb/
- $ git checkout -b feature/some-change origin/dev
當(dāng)你在子模塊做完一些修改一些修改之后，你想要把這這些修改推送到遠(yuǎn)程。
- $ git commit -am 'test commit submodule'
- $ git checkout dev
- $ git merge feature/some-change
- $ git push origin dev
- $ git branch -d feature/some-change
這時(shí)候你的子模塊的修改就已經(jīng)提交到遠(yuǎn)程了，但是如果你進(jìn)入到主項(xiàng)目的根目錄查看差異，你會(huì)發(fā)現(xiàn)主項(xiàng)目中多了一些修改：
- $ cd ../../
- $ git diff
- > diff --git a/subb b/subb
- index 433859c..b78179a 160000
- --- a/subb
- +++ b/subb
- @@ -1 +1 @@
- -Subproject commit 433859c90e539d2a1b9fda27b32bef0d0acae9e6
- +Subproject commit b78179adab252a524ff2a41d6407a7daa6dad34f
這是因?yàn)槟阈薷牧俗幽Ksubb并提交了，但是主項(xiàng)目的指針依舊指向那個(gè)老的commit id，如果你不提交這個(gè)修改的話，別人拉取主項(xiàng)目并且使用git submodule update更新子模塊還是會(huì)拉取到你修改前的代碼。關(guān)于：Git 提交規(guī)范
所以這時(shí)候你需要把主項(xiàng)目也提交一遍：
- $ git commit -am "test commit submodule"
- $ git push origin dev
這樣，你的修改就已經(jīng)全部提交了。
新成員加入
當(dāng)有新成員你加入你的子模塊并且需要拉取代碼的時(shí)候：
- $ git clone https://github.com/test/main.git
- $ git checkout -b dev origin/dev
- $ git submodule init
- $ git submodule update subb
git submodule update [submodule name]是指定拉取指定子模塊的用法，如果你需要更新所有的子模塊只需要使用git submodule update就可以了，一般我們?cè)趨f(xié)作中只關(guān)注自己的模塊。
那么接下來新成員也可以延續(xù)我們上面的開發(fā)流程了。
刪除子模塊
當(dāng)然也有需求變動(dòng)或者添加錯(cuò)誤的時(shí)候，這時(shí)候就需要?jiǎng)h除子模塊了，值得吐槽的是git沒有直接刪除子模塊的命令，所以只能逐步刪除相關(guān)文件：
在版本控制中刪除子模塊：
- $ git rm -r modules/subb
在編輯器中刪除如下相關(guān)內(nèi)容，也可以使用命令vi .gitmodules在vim中刪除：
- [submodule "modules/subb"]
- path = modules/subb
- url = https://github.com/test/subb.git
- branch = dev
在編輯器中刪除如下相關(guān)內(nèi)容，也可以使用命令vi .git/config在vim中刪除：
- [submodule "modules/subb"]
- url = https://github.com/test/subb.git
- active = true
刪除.git下的緩存模塊：
- $ rm -rf .git/modules/subb
接下來提交修改：
- $ git commit -am "delete subb"
- $ git push origin dev
發(fā)布項(xiàng)目
當(dāng)整個(gè)開發(fā)流程都結(jié)束了，終于到了發(fā)布的時(shí)刻，當(dāng)然需要在主項(xiàng)目更新你的所有子模塊：
- $ git checkout master
- $ git pull origin master
- $ git submodule update
- $ yarn build
這時(shí)候就可以發(fā)布你整個(gè)項(xiàng)目了，關(guān)于協(xié)作中使用子模塊的操作就寫到這里，如果有疑問請(qǐng)?jiān)谠u(píng)論區(qū)留言。
