pnpm モノレポ検証メモ

目的

PNPM によるモノレポ管理の理解を深めるために、今回は以下の検証を行う：

1. プロジェクトフォルダ直下に React TS (Vite) を 2 つセットアップ。
   • React TS は web-react-01 および web-react-02 とする。
2. TanStack Query をあえてルートにインストールし、web-react-01 および web-react-02 の両方に依存として紐づくか確認。
3. web-react-01 に対してのみ TanStack Router をインストールし、実体がどこに保存されるかを確認。
4. web-react-03 をセットアップし、ルートにインストールした Query や、web-react-01 にインストールした Router が勝手に紐づくのかを確認。

実施内容

1. プロジェクト作成と初期設定

# ルートに package.json を作成
pnpm init

# ワークスペース定義
echo "packages:\n  - 'web-react-*'" > pnpm-workspace.yaml

# React TS (Vite) アプリを 3 つ作成
pnpm create vite web-react-01 --template react-ts
pnpm create vite web-react-02 --template react-ts
pnpm create vite web-react-03 --template react-ts

# 依存インストール
pnpm -r install

2. TanStack Query を "わざと" ルートに対してインストール

# --filter なしでルートにインストール
pnpm add @tanstack/react-query

• 各 web-react-* の package.json には依存が追加されず、ルート直下の package.json にのみ追加された。
• 結果、各 web-react-* では依存として紐づけしていない状態。

3. TanStack Query および Router を各アプリに対してインストール

# web-react-01 および web-react-02 に対して TanStack Query をインストール
pnpm add @tanstack/react-query @tanstack/react-query-devtools --filter web-react-01 --filter web-react-02

# web-react-01 に対してのみ TanStack Router をインストール
pnpm add @tanstack/react-router @tanstack/router-devtools --filter web-react-01

• web-react-01 の package.json に Query と Router の両方が追加された。
• web-react-02 の package.json に Query だけが追加された。
• web-react-03 には何も追加されていなかった。

4. ルートに誤追加した TanStack Query の削除と整理

# ルートの package.json から Query を削除
pnpm remove @tanstack/react-query

# ロックとリンク再構築
pnpm install

学んだこと

• ルートにライブラリを追加しても各アプリには依存として紐づかない。
• --filter で、ライブラリを使用するアプリに対して追加する必要がある。
• .pnpm にライブラリの実体が集約されるため、2 度目以降のインストール時は、ファイルが効率的に共有される。（Vite React が自動的に共有されていた）