Monorepo——大型前端項目的代碼管理方式

ziwenxie 發布于2019-08-26 13:57 / 3590人閱讀

摘要：目前最常見的解決方案是和的特性。具體的使用方法移步官網而使用作為包管理器的同學，可以在中以字段聲明，就會以的方式管理。這樣的話，無論你的包管理器是還是，都能發揮的優勢要是包管理是，就會把依賴安裝交給處理。

最近我接手了一個項目，代碼量比較大、有點復雜。倉庫 clone 下來代碼有 50+ MB，npm install 安裝完體積飚到了近 2GB …… 熟悉了一下，這個項目比較復雜，采用了 monorepo 的方式進行代碼的管理。折騰幾天后，對 monorepo 也有個大概的了解……

Monorepo

Monorepo 是管理項目代碼的一個方式，指在一個項目倉庫 (repo) 中管理多個模塊/包 (package)，不同于常見的每個模塊建一個 repo。

目前有不少大型開源項目采用了這種方式，如 Babel：

How is the repo structured?
The Babel repo is managed as a monorepo that is composed of many npm packages.

還有 create-react-app, react-router 等。可以看到這些項目的第一級目錄的內容以腳手架為主，主要內容都在 packages 目錄中、分多個 package 進行管理。

├── packages
|   ├── pkg1
|   |   ├── package.json
|   ├── pkg2
|   |   ├── package.json
├── package.json

monorepo 最主要的好處是統一的工作流和Code Sharing。比如我想看一個 pacakge 的代碼、了解某段邏輯，不需要找它的 repo，直接就在當前 repo；當某個需求要修改多個 pacakge 時，不需要分別到各自的 repo 進行修改、測試、發版或者 npm link，直接在當前 repo 修改，統一測試、統一發版。只要搭建一套腳手架，就能管理（構建、測試、發布）多個 package。

不好的方面則主要是 repo 的體積較大。特別是，因為各個 package 理論上都是獨立的，所以每個 package 都維護著自己的 dependencies，而很大的可能性，package 之間有不少相同的依賴，而這就可能使install時出現重復安裝，使本來就很大的 node_modues 繼續膨脹（我稱這為「依賴爆炸」...）。

基于對以上的理解，我認為當項目到一定的復雜度，需要且可以劃分模塊、但模塊間聯系緊密的，比較適合用 monorepo 組織代碼。

目前最常見的 monorepo 解決方案是 Lerna 和 yarn 的 workspaces 特性。其中，lerna 是一個獨立的包，其官網的介紹是：

a tool that optimizes the workflow around managing multi-package repositories with git and npm.

上面提到的 Babel, create-react-app 等都是用 lerna 進行管理的。在項目 repo 中以lerna.json聲明 packages 后，lerna 為項目提供了統一的 repo 依賴安裝 (lerna bootstrap)，統一的執行 package scripts (lerna run)，統一的 npm 發版 (lerna publish) 等特性。對于「依賴爆炸」的問題，lerna 在安裝依賴時提供了--hoist選項，相同的依賴，會「提升」到 repo 根目錄下安裝，但……太雞肋了，lerna 直接以字符串對比 dependency 的版本號，完全相同才提升，semver 約定在這并不起作用。

具體的使用方法移步 Lerna 官網：https://lerna.js.org

而使用 yarn 作為包管理器的同學，可以在 package.json 中以 workspaces 字段聲明 packages，yarn 就會以 monorepo 的方式管理 packages。相比 lerna，yarn 突出的是對依賴的管理，包括 packages 的相互依賴、packages 對第三方的依賴，yarn 會以 semver 約定來分析 dependencies 的版本，安裝依賴時更快、占用體積更小；但欠缺了「統一工作流」方面的實現。

yarn 官網對 workspace的詳細說明：Workspaces | Yarn

lerna 和 yarn-workspace 并不是只能選其一，大多 monorepo 即會使用 lerna 又會在 package.json 聲明 workspaces。這樣的話，無論你的包管理器是 npm 還是 yarn，都能發揮 monorepo 的優勢；要是包管理是 yarn ，lerna 就會把依賴安裝交給 yarn 處理。

再說回我那項目呢，安裝依賴后體積實在是大，折騰了兩天想要優化一下，但目前大量腳本嚴重依賴 npm，我……

還是后面考慮慢慢遷移到 yarn 吧。

Reference

babel/monorepo.md at master · babel/babel

EHOIST_ROOT_VERSION warning hoisting question · Issue #872 · lerna/lerna

Others git-submodule

通過 Git 子模塊，可以在當前 repo 中包含其它 repos、作為當前 repo 的子目錄使用，同時能夠保持 repos 之間的獨立。

# 在當前 repo 添加一個子模塊
git submodule add git@github.com:xxx/xxx.git path/to/xxx

可以在 .gitmodule文件中看到當前 repo 有哪些 submodule，分別的 name, branch 等。

# clone 含有 submodule 的 repo 后：
# 初始化 git submodule 信息
git submodule init
# 更新 submodule，相當于 git pull 吧
git submodule update

修改子模塊文件后，在當前 repo 執行 git status 只會看到有模塊的 changes，而不是具體子模塊文件：

diff --git a/path/to/submodule b/path/to/submodule
--- a/path/to/submodule
+++ b/path/to/submodule
@@ -1 +1 @@
-Subproject commit xxxxxxx
+Subproject commit xxxxxxx-dirty

dirty表示子模塊的修改還不是 commit。如果子模塊的修改 commit 后，這個改動就會是具體的 commit id。

子模塊的其它 commit, pull 等各操作，還是到其目錄下，按普通 repo 操作即可。

Reference

Git - 子模塊：

https://git-scm.com/book/zh/v...

man git-submodule

git submodules - Git diff says subproject is dirty - Stack Overflow

https://stackoverflow.com/que...

git-bisect

git 有一個以二分法幫助定位問題的命令——bisect。

# 開始二分查找問題
git bisect start
# 標記當前有問題
git bisect bad
# 標記哪個 commit 或 tag 時是沒問題的
git bisect good v1.0.0

# 此時 git 會 checkout 兩個點之間的某個 commit，
# 如果此時還是有問題：
git bisect bad
# 如果此時沒有問題：
git bisect good
# 接著 git 會 checkout 下一個「有問題」和「沒問題」之間的 commit

# 直到定位到問題，git 會提示：xxxxxxx is first bad commit

Reference

使用 Git 調試

https://git-scm.com/book/zh/v...

歡迎關注我的訂閱號——「車迷與碼農」，不定期分享關于前端、汽車和有趣的事兒~

GPU云服務器云服務器客戶管理系統代碼項目大型數據中心機房供電方式 python大型項目 api的方式來管理云服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109885.html

精讀《Monorepo 的優勢》

摘要：引言本周精讀的文章是。精讀總的來說，雖然拆分子倉庫拆分子包是進行項目隔離的天然方案，但當倉庫內容出現關聯時，沒有任何一種調試方式比源碼放在一起更高效。前端精讀幫你篩選靠譜的內容。 1. 引言本周精讀的文章是 The many Benefits of Using a Monorepo。現在介紹 Monorepo 的文章很多，可以分為如下幾類：直接介紹 Lerna API 的；介紹如何...

xcc3641 2019-08-26 13:45 評論0 收藏0
lerna管理package

摘要：最近發現公司一個項目的目錄組織挺奇怪的，所有的子項目都放在了目錄里，還有這種騷操作特意查了下資料，發現是一種比較流行的項目管理模式。最近發現公司一個項目的目錄組織挺奇怪的，所有的子項目都放在了packages目錄里，還有這種騷操作？特意查了下資料，發現是一種比較流行的monorepo項目管理模式。近幾年比較火的React,Vue,Babel都是用的這種模式: showImg(http...

PumpkinDylan 2019-08-23 18:34 評論0 收藏0
說明Yarn與Lerna管理monorepo使用

　　我們先說下 Yarn workspace　　首先Yarn workspace 是 Yarn 提供的 monorepo 下，管理依賴的機制。這就說主要對代碼倉庫下，多個 package 的依賴，進行管理：將共同的依賴，做 hosting（提升）。前述這樣就可以有效的防止 package 中的包重復安裝。 workspace 機制，會在根目錄下，統一安裝依賴到 node_module，并生成...

3403771864 2023-01-02 10:55 評論0 收藏0
兩年React老兵的總結 - 如何組織React項目

摘要：一個復雜的應用都是由簡單的應用發展而來的隨著越來越多的功能加入項目代碼就會變得越來越難以控制本文章主要探討在大型項目中如何對組件進行組織讓項目具備可維護性系列目錄類型檢查組件的組織樣式的管理組件的思維狀態管理目錄組件設計的基本原則基本原則高一個復雜的應用都是由簡單的應用發展而來的, 隨著越來越多的功能加入項目, 代碼就會變得越來越難以控制. 本文章主要探討在大型項目中如何對組件進行組...

hoohack 2019-08-23 18:40 評論0 收藏0
簡單說說 angular.json 文件

摘要：指向一個文件，這個文件描述了所有的字段以及約束。其中一個項目為一個子項，如為一個項目，在創建時自動生成。整個也有此字段，默認生效于所有。默認項目，當使用一些命令沒有指定項目名稱時，默認指向的項目。 ... 在Angular CLI 6+的版本后，原先的angular-cli.json就被換成了angular.json，而其中里面的字段變化挺大了，如果不了解基本的組成，或者直接把老版本的...

wangjuntytl 2019-08-23 12:34 評論0 收藏0