pnpm モノレポ構築メモ（npm との違い）

目的

pnpm によるモノレポ管理の導入にあたり、npm との違いを確認する。

比較

方式	内容	サイズ
npm（マルチレポ）	ReactApp01 + ReactApp02 を個別管理	約 168 MB
pnpm（モノレポ）	ReactApp01 + ReactApp02 をワークスペース管理	約 87 MB

基本手順

# 雛形作成
pnpm create vite ReactApp01 --template react-ts
pnpm create vite ReactApp02 --template react-ts

# ワークスペース定義
echo "packages:\n  - 'ReactApp*'" > pnpm-workspace.yaml
echo '{"name":"mono-repo-test","private":true}' > package.json

# 依存インストール（-r が重要）
pnpm -r install

# 個別起動
pnpm --filter ReactApp01 run dev
pnpm --filter ReactApp02 run dev

学び

• npm は「各家にそれぞれ同じものを置く」方式：
  • app1 に React を置く
  • app2 にも React を置く
  • 無駄が多く、更新差異が出やすい
• pnpm は「ひとつの倉庫に置いて、家から借りる」方式：
  • 一度だけ React を倉庫（pnpm store）へ
  • 各アプリはそれをリンクして使用
  • 全体で同一バージョンを共有
• pnpm -w install はルートしか見ない
• pnpm -r install で全体を構築
• --filter <pkg> は個別パッケージ用
• pnpm-workspace.yaml はユーザーが手動作成し、pnpm install 前に用意する
• pnpm-lock.yaml は pnpm が自動生成。手動編集不要
• package.json の "private": true で誤公開防止
• pnpm の node_modules は実体を共有ストアに持ち、各プロジェクトにはハードリンクを置く
• 共有ストア方式により、npm マルチレポの約半分の容量に削減