ReactPress: 効率的な開発のための pnpm を使用した Monorepo アプローチ

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

ReactPress: 効率的な開発のための pnpm を使用した Monorepo アプローチ

現代の Web 開発の領域では、スケーラブルで保守可能なコードベースを維持するために依存関係とプロジェクト構造を管理することが重要です。 React と Node.js で構築されたオープンソース パブリッシング プラットフォームである ReactPress は、このプロセスを合理化するために pnpm を使用したモノリポ アプローチを採用しています。 ReactPress が pnpm のモノリポジトリ機能を活用して開発効率を高める方法について詳しく見ていきましょう。

モノレポとは何ですか?

モノリポジトリ (モノリシック リポジトリ) は、複数のプロジェクトまたはモジュールが 1 つのリポジトリ内で管理されるソフトウェア開発手法です。このアプローチにより、依存関係の管理が簡素化され、コードの再利用が促進され、プロジェクトの保守性が向上します。 ReactPress は、主に複数のパッケージ間の依存関係を効率的に処理できるため、モノリポジトリ戦略を採用しています。

pnpm の概要

pnpm は、ハード リンクとシンボリック リンクを利用して不必要なファイルのコピーを回避する高性能の npm パッケージ マネージャーです。これにより、インストール時間とディスク容量の使用量が大幅に削減されます。さらに、pnpm はワークスペースをサポートしているため、複数のパッケージを非常に簡単かつ効率的に管理できます。

ReactPress モノレポの実装

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'

ここでは、concurrently パッケージを使用して、クライアントとサーバーの両方の開発サーバーを同時に起動します。 pnpm -w コマンドは、指定されたワークスペース サブパッケージ内のスクリプトを実行します。

コード例

以下は、ReactPress モノリポジトリでサブパッケージを整理して実行する方法を示す簡単なコード例です。

クライアントとサーバーのサブパッケージにそれぞれ 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 の pnpm を使用したモノリポジトリ アプローチは、依存関係の管理とプロジェクト構造に大きな利便性をもたらします。フロントエンドの React アプリケーションとバックエンドの Node.js サーバーを同じリポジトリ内に編成することで、ReactPress は、依存関係の管理とビルド プロセスを簡素化しながら、異なるサブパッケージ間でコード、構成、ツールを簡単に共有できます。フロントエンドとバックエンドが分離された大規模なプロジェクトを開発していて、依存関係とコード構造をより適切に管理したい場合は、ReactPress のモノリポジトリのアプローチは間違いなく従う価値のある例です。

GitHub の ReactPress リポジトリを自由に探索して、pnpm の monorepo 機能を活用して開発効率を向上させる方法を確認してください。コーディングを楽しんでください! ?

以上がReactPress: 効率的な開発のための pnpm を使用した Monorepo アプローチの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。