你真的懂Monorepo？五分鐘帶你認識前端大型架構

大型架構

什麼是大型架構？

大型(large scale)是一個有點模糊的詞彙，什麼是大型？

100人以上的前端大型開發專案？還是超過一千個頁面的大型專案？或是跨國部門的前端大型開發專案呢？

說實話，大型開發專案每個人心中的答案不同，但是不可否認的，當程式碼數量一累積，不管是哪一類型的大型專案都是相當難以管理的。

從幾個角度來舉例：

前端技術：有的前端頁面系統使用Vue.js、Jest，有的前端使用React.js、Cypress，維護起來相當費時。

前端架構：幾百幾千個的功能前端元件散落在各個不同的檔案，彼此之間的耦合性以及相依性複雜。

團隊：團隊彼此間都有自己的程式碼風格，以及習慣使用的技術，在不同團隊合作上可能專注在自己團隊的規則，忽略溝通。

為了解決上述的問題，Monorepo前端大型架構就這樣誕生了。

Monorepo

Monorepo 簡介

前端技術近幾年快速演變，ES6,、SCSS 前處理、npm,、前端框架、CI/CD、Docker… 等等。如果要完成一個小型的應用程式，除了上述列舉的技術以外，可能還需要維護比較大型且複雜的平台。

Monorepository 是一個架構的概念，從字面上的意思來看Mono（one）repo（repository），可以得知這樣的(Monorepo)架構是將大量的程式碼全部放在同一個 Code base 下做管理，不同於舊有的分離式概念，Google 是優先採用Monorepo 的公司之一。

從以下 Monorepo架構圖可以大致上知道Monorepo與其他不同的架構差異。

Monorepo優缺點

Monorepo 前端大型架構有什麼優點呢？

1. 程式可重用性高，可避免重工

2. 程式碼更透明，更好進行重構

3. 所有套件使用相同版本，包含測試以及設定檔

4. 所有程式碼風格一致

5. 不同團隊間溝通更頻繁

Monorepo 前端大型架構有什麼缺點呢？

1. 沒辦法針對部分程式碼，設定權限

2. 當進行大型專案時，Git 效能沒有這麼的好

3. 建置應用程式時間較長

Monorepo 文化

其實Monorepo這個概念已有一段時間了，在三十年前就有FreeBSD一詞並且使用CVS以及跟Monorepo相關概念的知識以及技術。

也有相當多的開源專案也是因Monorepo概念而成功的，例如：

Laravel：其中一個PHP的網頁框架

Babel：相當知名的JavaScript的網頁編譯器。Monorepo也間接的幫助Babel完成多種專案的打包。

React、Angular、Vue：知名的前端框架也因Monorepo的出現，讓各種前端框架系統可以存在於同一個大型專案裡面。

Monorepo 適合投資嗎？

以一言以蔽之來說，Monorep是一個「前人種樹，後人乘涼」的概念。

以前端舉例：當要在多個不同系統以及產品中，共用相同的元件，Monorepo是一個相當好的選擇。雖然一開始在設定以及成功運行上需要花費一些時間，但是未來不同團隊間如果有遇到類似的元件，是可以直接去做使用的。

或許有些人認為Monorepo會因為各種因素而選擇不使用，諸如：程式碼權限問題、總檔案量越來越大… 但讀者還是可以根據不同情況去做抉擇。

結語

Monorepo 只是一個工具。雖然面對各式各樣的問題都有不同的解決方法，Monorepo也不一定是最佳解法，但是未來這樣的概念也會持續進步，並且幫助我們處理更龐大且複雜的問題

引用

Guide to Monorepos for Front-end Code