Photo by Ales Nesetril on Unsplash.com

常見的 Monorepo 框架大比較

Andy Chen
Starbugs Weekly 星巴哥技術專欄
7 min readJul 3, 2022

--

前言

筆者之前曾寫過一篇文章叫:淺談 Monorepo 帶來的效益:以 Turborepo 為例,其實 Monorepo 的框架有非常多種,筆者在上一篇文章只提到其中一個框架而已,今天這篇文章就要來補一下之前的洞來比較一下目前時下比較流行的 Monorepo 框架。

Turborepo

首先是 Turborepo,上次的文章中只提到 Turborepo 的使用方式,今天這篇文章就來提提 Turborepo 的相關觀念吧!

Truborepo 是一套相當輕量的且可以快速建立出 Monorepo 架構的框架,這套框架是由一位很有名氣的工程師 Jared Palmer 開發,後續也是由鼎鼎大名的 vercel 團隊進行維護。

雖然 Turborepo 是 2021 年才問世的算是相當新的一個框架,後續可能會有許多問題以及待優化項目需要處理,不過畢竟人家背後有 vercel 在幫忙,所以讀者其實是可以放心使用的不用擔心XD

而 Turborepo 一共有以下幾種特性:

  • Faster, incremental builds:更快的 build 速度。
  • Content-aware hashing:自動查看專案內所有檔案進行 build,而不是利用 timestamp 的方式來決定哪些檔案是需要 build 的。
  • Cloud caching:可以分享 cloud build caching 來加速 CI/CD 的建置。
  • Parallel execution:有效利用所有 CPU 核心的效能,不會浪費閒置 CPU 的效能。
  • Task pipelines:定義 task 的關係,讓 Turborepo 可以最佳化的決定這些 task 的 build 時機。
  • Pruned subsets:藉由建立 subset 來加速 Platform as a Service(Paas) 的 deploy 效能。
  • Convention-based config:利用 JSON file 來降低複雜度。

有了以上幾點特性讓 Turborepo 可以成為一套既容易上手又可以兼具專案效能的好用的 Monorepo 框架。

Nx

Nx 是一套相當好用的 Monorepo 框架,本身內建相當多好用的工具提供給開發者使用,此框架也是最多人拿來跟 Turborepo 比較。

相較於 Turborepo ,Nx 是從 2018 年問世,所以整體來說一定有更好的優化以及更好的開發體驗,接下來筆者會一一介紹幾個筆者在使用此框架時有用到的好用工具,讀者如果後續有想要玩玩看 Nx 的話不妨也可以試試看這些功能。

Nx 一共有以下幾個特性:

  • Local computation caching:本地端快取,記憶已經 build 過的內容,讓後續在 build 的過程中不必再花時間 build 先前的檔案,藉此加速專案整體 build 的時間。
  • Project graph visualization:互動式圖形化介面,讓開發者可以快速知道專案間彼此的相依性,也可以藉此檢查是否有 repo 引用了錯誤的 repo。

這件事在 Turborepo 中如果要達到必須要安裝一個叫 Graphviz 的工具,且此工具只能生成圖檔無法產生互動式介面。

左圖為 nx-graph 右圖來自 Go Package Imports
  • task coordination:任務協調,可以同步進行專案 repo build 的 task 藉此達加速整個 build 的流程,詳細的內容會在下方介紹 Lerna 的時候一併介紹給讀者。

除了以上這幾點特性外,筆者認為 Nx 還有一個特性做得比 Turborepo 好,在終端機的顯示上 Nx 給人一種一目了然的感覺,可以知道有哪些檔案正在 build 而且也有顏色上的區分。

出自 https://github.com/vsavkin/large-monorepo

除了終端機的顯示差別外,在 build 的時間上拜 local caching 所賜,Nx 也是贏過 Turborepo 的。

出自 https://github.com/vsavkin/large-monorepo

Lerna

Lerna 這套 Monorepo 框架相較於上面提到的 Nx 以及 Turborepo 來說可以說是最老牌的,是從 2015 年開始問世的,而 Lerna 包含的東西非常多可以說是奠定了一套最完整的 Monorepo 架構的基礎。

Lerna 提供了相當多的 command 可以使用,其中最重要的兩個 command 分別是 lerna bootstrap 以及 lerna publish ,想了解更多 command 的讀者可以參考這個網站,筆者只會單純介紹這兩個好用的 command。

  • lerna bootstrap:用來連結專案內的 dependencies。
  • lerna publish:用來發布 updated package。

還記得上面提到的 task coordination 嗎?Lerna 其實沒有比較優化的 task coordination 流程,必須要一個 task 完成後才能執行下一個 task,假如專案內的 repo 有相依性的問題,這時候整體的 build 時間就會拉得很長。

然而 Turborepo 以及 Nx 都有完美做到 task coordination 的效果,下圖為 task coordination 的簡單範例,相信讀者應該可以馬上感受出來整體在 build 的過程中的時間差。

出自 https://turborepo.org/docs/features/pipelines

不過 Lerna 在最新的 v5 版本中加入了不少元素,最大的特點莫過於可以跟 Nx 結合並且使用一些 Nx 才有的功能,例如:Local computation cachingProject graph visualization 甚至是 task coordination 等等,讓 Lerna 不會被時代的推進而淘汰。

使用的方式也很簡單,只要將根目錄下的 lerna.json 中加上 useNx: true 這個設定即可使用 Nx 的功能,當然讀者也要記得安裝 Nx 才能真的使用這些功能喔。

小結

這次文章介紹了在 React 中比較主流的三大 Monerepo 框架,這三個框架彼此都有各自的優缺點,所以沒有絕對的好用跟不好用,一切都可以取決於自己的喜好來做選擇喔!

不過由於筆者自己本身是寫 React 的,也用了不少 Vercel 團隊的工具,例如 Next.js、swr 等,所以一開始筆者接觸的 Monorepo 框架也是先從 Turborepo 開始,但用著用著後續也覺得 Nx 更好用一些所以就打算寫一篇文章來比較各個常見的 Monorepo 框架了,希望能藉此幫助到跟我一樣有選擇障礙的讀者XD

如果讀者對於文章有任何問題都歡迎留言給我,感謝大家的閱讀~

Reference

--

--

Andy Chen
Starbugs Weekly 星巴哥技術專欄

嗨嗨我是Andy,用嘴巴工作的工程師😂,喜歡學習不同領域的內容,專長為網頁開發,歡迎大家跟我聊技術~