ReactPress：使用 pnpm 實作高效開發的 Monorepo 方法

ReactPress GitHub：https://github.com/fecommunity/reactpress

ReactPress：使用 pnpm 實作高效開發的 Monorepo 方法

在現代 Web 開發領域，管理依賴關係和專案結構對於維護可擴展和可維護的程式碼庫至關重要。 ReactPress 是一個使用 React 和 Node.js 建立的開源發布平台，它採用使用 pnpm 的 monorepo 方法來簡化此過程。讓我們深入了解 ReactPress 如何利用 pnpm 的 monorepo 功能來提高開發效率。

什麼是 Monorepo？

monorepo（整體儲存庫）是一種軟體開發實踐，其中多個專案或模組在單一儲存庫中管理。這種方法簡化了依賴關係管理，促進程式碼重用，並增強專案的可維護性。 ReactPress 採用 monorepo 策略，主要是因為它可以有效處理多個套件之間的依賴關係。

PNPM簡介

pnpm 是一個高效能的 npm 套件管理器，它利用硬連結和符號連結來避免不必要的檔案複製。這顯著減少了安裝時間和磁碟空間使用量。此外，pnpm 支援工作區，使管理多個套件變得異常簡單和有效率。

ReactPress Monorepo 實施

ReactPress 將其整個專案組織為單一 Git 儲存庫。儲存庫內部存在多個子目錄，每個子目錄代表一個獨立的 npm 套件，可以單獨開發、測試和發布。

專案結構

ReactPress 專案結構如下圖所示：

reactpress/
├── client/        # Frontend React application
├── server/        # Backend Node.js server
├── config/        # Configuration files and scripts
├── .npmrc
├── pnpm-workspace.yaml
├── package.json
└── ...

• client/ 目錄包含前端 React 應用程式程式碼。
• server/ 目錄包含後端 Node.js 伺服器程式碼。
• config/目錄儲存設定檔和腳本。
• .npmrc 檔案用於設定 npm/pnpm 的全域配置。
• pnpm-workspace.yaml 檔案指定工作區子包的位置。
• 根級 package.json 檔案通常定義全域腳本、相依性和 devDependency。

配置 pnpm 工作區

在 ReactPress 根目錄中，pnpm-workspace.yaml 檔案指定工作區佈局：

packages:
  - 'client'
  - 'server'
  # If there are packages in the config directory that need to be included, they can be listed here too
  # - 'config/some-package'

這表示客戶端和伺服器目錄被視為工作區子包。

依賴管理

在單一儲存庫中，子包可以相互依賴。例如，客戶端子包可能依賴伺服器子包提供的 API。在pnpm中，可以直接在子套件的package.json檔案中加入依賴，如下所示：

reactpress/
├── client/        # Frontend React application
├── server/        # Backend Node.js server
├── config/        # Configuration files and scripts
├── .npmrc
├── pnpm-workspace.yaml
├── package.json
└── ...

請注意，在上面的範例中，客戶端子包並不直接依賴伺服器子包，因為前端應用程式通常透過 HTTP 請求與後端伺服器進行通訊。但是，如果前端應用程式需要直接呼叫後端提供的某些模組或實用函數（這種情況並不常見），您可以在客戶端的 package.json 檔案中新增對伺服器的依賴。

腳本和構建

在ReactPress的根package.json檔案中，您可以定義用於建置、測試或發佈整個專案的全域腳本。例如：

packages:
  - 'client'
  - 'server'
  # If there are packages in the config directory that need to be included, they can be listed here too
  # - 'config/some-package'

在這裡，我們使用並發包同時啟動客戶端和伺服器的開發伺服器。 pnpm -w ;指令執行指定工作空間子包中的腳本。

程式碼範例

以下是一個簡單的程式碼範例，示範如何在 ReactPress monorepo 中組織和運行子套件。

假設我們在客戶端和伺服器子包中分別設定了一個 React 前端應用程式和一個 Express 後端伺服器。現在，我們可以使用以下命令來建置並啟動整個專案：

// In client/package.json
{
  "name": "@reactpress/client",
  "version": "1.0.0",
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    // Normally, the client communicates with the server via HTTP requests, so it doesn't directly depend on the server package
    // But if the client needs to directly call modules or utilities provided by the server, you can add a dependency like this
    // "@reactpress/server": "workspace:*"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    // Other scripts...
  }
}

// In server/package.json
{
  "name": "@reactpress/server",
  "version": "1.0.0",
  "dependencies": {
    "express": "^4.17.1",
    "mysql2": "^2.3.3",
    // Other dependencies...
  },
  "scripts": {
    "start": "node index.js",
    // Other scripts...
  }
}

此指令將同時啟動客戶端和伺服器子包的開發伺服器。您也可以執行以下命令分別啟動客戶端或伺服器：

{
  "name": "reactpress",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "start:client": "pnpm -w client start",
    "start:server": "pnpm -w server start",
    "build:client": "pnpm -w client build",
    // Define a script to start both the client and server simultaneously
    "start": "concurrently \"pnpm -w client start\" \"pnpm -w server start\""
  },
  "devDependencies": {
    "concurrently": "^6.2.1",
    // Other development dependencies...
  },
  "workspaces": [
    "client",
    "server"
    // If there are packages in the config directory that need to be included, they can be listed here too
    // "config/some-package"
  ]
}

結論

ReactPress 的 monorepo 方法與 pnpm 為依賴管理和專案結構帶來了顯著的便利。透過將前端 React 應用程式和後端 Node.js 伺服器組織在同一儲存庫中，ReactPress 可以輕鬆地在不同子套件之間共用程式碼、配置和工具，同時簡化依賴項管理和建置流程。如果您正在開發一個大型前後端分離的項目，並且希望更好地管理您的依賴項和程式碼結構，ReactPress 的 monorepo 方法絕對是一個值得效仿的範例。

歡迎探索 GitHub 上的 ReactPress 儲存庫，看看它如何利用 pnpm 的 monorepo 功能來提高開發效率。快樂編碼！ ？

以上是ReactPress：使用 pnpm 實作高效開發的 Monorepo 方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！