淺談 Monorepo 帶來的效益:以 Turborepo 為例

分享會大綱

  1. monorepo 基本介紹
  2. 為甚麼我們需要 monorepo
  3. package manager
  4. Turborepo 基本設定
  5. Turborepo 開發
  6. 常見的 monorepo 框架比較

monorepo 基本介紹

一般來說我們的開發模式都是一個專案用一個 repository 來進行管理。

以一般的 SaaS 產品來說我們會有員工操作的後台網頁,以及提供給使用者操作的前台網頁。

在開發時就必須要建立兩個 repository 來開發跟管理,這種開發模式稱為 multi-repo

反之如果我們這兩個專案僅使用一個 repository 來開發跟管理,這種開發模式稱為 monorepo

為甚麼我們需要 monorepo

其實 Monorepo 除了管理專案之外,也可以管理一些共用的元件,甚至是共用的 utils,這樣就不用很麻煩的在兩個專案上進行 copy and paste

通常在 Monorepo 上會用以下的專案架構進行設計,這邊以 CMS 架構進行說明。

在 apps 的資料夾中,我們會擺上真正會被執行的專案,假如日後這個專案是有機會要被 build 成 docker image 的話,這時候就可以根據 apps 資料夾內的專案產出相對應的 docker image,以上述的例子來看就是會產生出 後台網站 以及 前台網站 這兩個 image。

在 packages 的資料夾中,我們就可以擺上各種需要被共用的元件或者是 utils,在這邊開發的共用內容就可以同時被 apps 資料夾內的專案使用,這樣的架構設計也可以讓程式碼寫起來相當乾淨。

package manager

在 Monorepo 的世界中一個 repository 底下會有很多個專案,每個專案都會有自己的 package,假如沒有一個好的 package manager 來管理這些 package 的話,最後就會讓整個 repository 很難被控制

前端來說比較著名的 package manager 有以下幾個:

通常 package manager 只負責用來處理套件的安裝,然而在 Monorepo 的架構中,我們通常都會有好幾個專案在同一個資料夾,這時候就必須要使用 package manager 的一個重要觀念:workspaces。

workspaces 簡單來說就是可以方便讓你一鍵安裝所有的套件至 workspaces 所管理的資料夾內,或者是方便你安裝套件在 workspaces 所管理的資料夾內。

想要設定 workspaces 管理的資料夾也很簡單,只要在 package.json 中填上想要被管理的資料夾路徑就好,像下圖這樣:

想要將套件利用 workspaces 安裝到指定的資料夾下也很簡單,只要打上 yarn workspace folderName add packageName 即可。

想要移除套件也很簡單,只要把剛剛指令中的 add 改成 remove 就好。

Turborepo 基本設定

Turborepo 開發

常見的 monorepo 框架比較