獨立模塊化系統 - 微前端或 Monorepo (React)

Question

問題

好吧，從手頭的問題開始。 幾個系統支持多種功能，無論它們是應用程序還是頁面，而且大多數都是獨立的。

但由於缺乏規划，該系統成為一個單一而復雜的項目，難以安裝或更新。

然后建議對其進行調整，使並行開發變得簡單、有效，因為獨立模塊的更改不會影響整個系統的更新。

這個概念已經被很好地定義，但我正在明確地尋找這在多大程度上是可能的，以及它是否值得。

結構體

上面的圖片很好地描述了我們打算在系統中做什么。

我們打算將系統划分為獨立的模塊，但可以相互共享一些東西，例如依賴關系、接口設計和全局狀態。

可能的解決方案 - 優點和缺點

這里開始我的問題。

在這個項目的建設結束后，我們應該有一個可以針對每個模塊單獨開發的系統。

一些解決方案

微前端 - React

Monorepo-反應

好吧，我們知道有幾種方法可以配置 React 項目並啟動它，這里開始了另一個挑戰。

另一個重點是生成的構建，有趣的是保持反應模式，其中幾個.js 和.css 文件將在構建文件夾中生成，使其易於啟動到生產中。

所有模塊都將使用相同的語言 (javascript) 和相同的框架 (react)。

那么，對於這個項目 scope，最好的選擇是什么？ 我閱讀了幾篇演示如何實現 monorepo 或微前端的文章，但大多數文章都很簡單，或者沒有展示整個過程、如何構建等。

包含上述想法的簡單演示也很有趣

Answer 1

我會 go 與 monorepo 方法具體： https://turbo.build/

有了這個，我可以在同一個 repo 中有多個包，也可以在同一個地方有 web 個應用程序。

我會像這樣構造它們：

apps
 - mainApp - App with module federation
 - module1 - app hosted at /app1
 - module2 - app hosted at /app2
 - module3 - app hosted at /app3
packages
 - app-container
 - app-requests
 - app-translations
 - app-logs
 - app-tracking
 - app-state-management

使用這種方法，您可以快速添加更多包，並可以在多個 web 應用程序之間共享公共實用程序。 您可以隨着需求的增長添加多個包，並在不同的 web 應用程序中快速使用它們，特別是與配置相關的東西，如 sentry/datadog。 稍后，如果應用程序和包變大，您可以將它們分成多個存儲庫，然后將它們單獨發布為包。

此外，您可以擁有一個實現模塊聯合的主應用程序，並可以使用在各自 URL 上獨立部署的其他應用程序。 您可以在此處閱讀有關模塊聯合的更多信息： https://webpack.js.org/concepts/module-federation/