在大型應用中，最關鍵且最具挑戰性的方面之一就是擁有一個良好且合理的文件結構。在考慮通過微前端將代碼庫拆分成多個應用之前，可以遵循一些步驟來改善項目級別的架構，并在您考慮這一路徑時使過渡更容易。

我們的目標是應用某種模塊化方法，使代碼庫更容易理解，通過為各個功能設置邊界，減少代碼耦合和副作用。

默認項目結構

默認情況下，當使用流行的前端框架之一搭建新項目時，組件結構是扁平的，并且沒有任何層次結構。

圖片

本示例使用的是 Vue 的默認項目結構，但 React 對如何將文件放入文件夾也沒有意見。

這個例子使用了 Vue 的默認項目結構，但 React 也沒有對如何將文件放入文件夾提出意見。

• assets：存儲應用中使用的靜態資產，如圖像、字體和 CSS 文件。
• components：包含可重用的 Vue 組件。推薦使用扁平層次結構。
• main.js：作為應用的入口點，啟用 Vue 并配置插件或附加庫。
• App.vue：表示應用的根組件，作為其他組件的容器并充當主要模板。

我們通過實踐發現，對于大型項目，這種架構很快就會失控。需要某種模塊化方法來輕松定位給定的文件，為各個功能設置邊界，并避免組件的緊密耦合。

將應用分解成多個功能

將應用分解成多個功能任何大型應用都會被分解成多個獨立的功能。識別它們并不總是容易和直接的，但經過一段時間和經驗之后會變得更好。我們一起嘗試將一個流行的應用分成多個部分作為練習。

圖片

Twitter 的主頁有很多內容。時間線是頁面的核心，被許多功能環繞，如導航、推文創建部分、帶有多個子組件的側邊欄、懸浮消息組件等。

圖片

將構成這些功能的所有組件放在同一個文件夾中是不可維護的，即使使用 IDE 的快速查找選項，定位其中一個組件也會非常困難。

更精細的項目結構

從經驗來看，更好和更全面的文件結構如下所示：

圖片

• components：所有跨整個應用使用的共享組件。
• composables：所有共享的 composables。
• config：應用配置文件。
• features：包含所有應用功能。我們希望將大部分應用代碼放在這里。稍后會詳細說明。
• layouts：頁面的不同布局。
• lib：應用中使用的不同第三方庫的配置。
• pages：應用的頁面。
• services：共享的應用服務和提供者。
• stores：全局狀態存儲。
• test：與測試相關的 mock、幫助程序、工具和配置。
• types：共享的 TypeScript 類型定義。
• utils：共享的實用函數。
• assets：靜態資源。

在項目根目錄下運行以下命令以創建不存在的文件夾。

mkdir -p src/{components,composables,config,features,layouts,lib,pages,services,stores,test,types,utils,assets}

需要注意的三件重要事項：

Pages 文件夾：頁面文件夾已經在上下文和構建工具（如 webpack 或 Vite）將創建的實際塊方面進行了一些模塊化。將所有頁面放在一個地方非常有幫助，但其中的邏輯應保持最低限度。

Features 文件夾：為了更容易的維護和擴展，我們希望將大部分應用代碼放在 features 文件夾中。每個功能文件夾應包含特定功能的領域代碼。

共享內容：在一個理想的世界中，我們不應該有共享組件、composables、stores 和 services，所有內容都應該放在相應的功能文件夾中。不幸的是，在實際項目中，這無法避免，但我們應該提前計劃，并在將內容添加到這些文件夾時格外小心。

Features 文件夾

正如前面提到的，我們的大部分應用應該放在 features 文件夾中，分為多個子目錄。

圖片

• api：所有的 fetch 邏輯都放在這里。這將 API 和 UI 解耦。
• components：特定功能的組件。
• composables：特定功能的 composables。
• stores：狀態管理代碼。多個子模塊是預期的，實際上是被鼓勵的。
• types：特定功能的 TypeScript 類型定義。
• index.ts：這是功能的入口點。它充當功能的公共 API，并且應該只導出應該為應用程序其他部分公開的內容。

上述的 index.ts 文件充當每個功能的公共 API。在從另一個領域導入內容時，應該僅通過此文件進行。這可以防止循環依賴，并且還可以更輕松地找到導入的來源。

// 不好的做法 ?? ?? ??
import { UserProfile } from '@/features/profile/components/UserProfile.vue'

// 好的做法 ? ? ?
import { UserProfile } from '@/features/profile'

我們可以使用 no-restricted-imports ESLint 規則來強制執行此模式。

rules: {
    'no-restricted-imports': [
      'error',
      {
        patterns: ['@/features/*/*'],
      },
    ],
    'import/no-cycle': 'error',
    ...
}

結論

以功能為導向的架構是一種有效且經過實戰驗證的結構復雜項目的方法。它允許我們將代碼解耦成獨立的模塊，并隨著應用的復雜性增加而擴展。這將通過提高代碼庫的可預測性、減少調試時間并使上手變得更容易，從而改善開發體驗。