ReactPress: 効率的な開発のための pnpm を使用した Monorepo アプローチ-jsチュートリアル-php.cn

ReactPress: A Monorepo Approach with pnpm for Efficient Development

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 サイトの他の関連記事を参照してください。