先說一下使用場景：當多個專案中用到了公共模組，如何處理這些公共模組呢？舉個例子：當前專案中用到了一些元件Loading、Input啊，一些公共元件，並不想寫在專案本身，而是抽出來可以為多個專案所複用。
本文主要對比以下兩種方式：
1. 把公共元件寫成一個npm包，使用時npm install安裝即可
2. 公共元件單獨寫成一個專案，使用時用git submodule引入到主專案中

下面比較這兩種方式的異同（下面假定公共元件庫專案名為common-component）

新增一個新的公共元件庫

• 倉庫地址是指公共元件庫的git地址，本地路徑是指最終要克隆到哪個目錄下，如果省略則預設當前專案的根目錄下面。這裡要注意的一點是，這個本地路徑是本地的絕對路徑，（可以在vscode直接右鍵複製路徑）。而且該路徑不能是當前專案的已有目錄。

• 相比之下npm這種方式就很簡單了，直接npm install,就可以在專案中使用了。

修改公共元件庫

• 先來說git submodule 。
  自己本地修改了公共元件庫，也就是當前專案的子專案。這時，git status可以看到子專案有修改。
  

  
  這個時候需要先到子專案提交程式碼，再到主專案提交程式碼。子專案就是common-component，git push程式碼提交，不多說了。
  
  看圖可以看到，主專案倉庫並不會儲存子專案的程式碼。 他保留的是子專案的commit id，來唯一標識子專案的每一次提交。

• npm相比較也是很簡單了，如果要更新元件庫，也就是要去更新這個npm包，主專案要更新直接npm install 再安裝一次就會下載到最新版本的包。

克隆一個新專案（帶有公共元件庫）

• 專案克隆下來之後並不會直接帶有全部的common-component的程式碼，只有這個common-component空資料夾和.gitmodules檔案(用於記錄子模組的路徑以及遠端版本庫地址)。這個時候再把common-component的內容下載下來。主專案和子專案都記得切分支。
  git submodule update --init --recursive

• 克隆一個專案，如果他引入了其他的npm包的話，npm install的時候都會安裝下來。當然，如果他安裝這個npm包的時候沒有—save或者—save-dev的話，你克隆下來，也需要再次npm install 才可以。

更新專案

• 公共元件被修改時更新專案
  git submodule foreach git pull

• npm的話，npm install一下，就可以安裝到最新的版本。

刪除元件庫

• git rm --cached common-component
rm -rf common-component
rm .gitmodules

• common-component是npm包的話，執行命令
  npm uninstall common-component
npm uninstall common-component --save-dev(--save) 不僅會刪掉npm包，也會從package.json中刪掉包的資訊。

  以上就是關於使用npm和git submodule一些基本操作的對比。顯然，使用npm包的這種方式更簡單。而且寫一個npm package釋出上去，不僅自己可以用，也可以使更多的開發者受益。當然，git submodule可以讓自己元件庫私有，並且元件庫寫起來很簡單，一個react元件就可以了。不像npm包還要打包，設定package.json安裝相關的依賴等。