Frontend Academy · レッスン

Monorepo向けpnpm Workspaces

ルートのpnpm-workspace.yamlを備えたpnpm workspaceを設定し、共有依存関係をホイストして、workspace:プロトコルでローカルパッケージをリンクします。

「Monorepo向けpnpm Workspaces」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

なぜ pnpm なのか

pnpm（Performant npm）は、高速でディスク効率に優れたパッケージマネージャーです。各パッケージをグローバルのコンテンツアドレス方式のストアに 1 コピーだけ保存し、プロジェクトの node_modules からそこへリンクします。同じ依存関係を複数のプロジェクトで使っても、ディスク上のコピーは 1 つだけです。

速度とディスク使用量の削減

一般的なモノレポでは、pnpm のインストールは npm/yarn より 2～3 倍高速で、ディスク使用量も約 70% 少なくなります。多数のパッケージを含むモノレポでは、大きな効果があります。

pnpm のインストール

Corepack（Node 16 以降に同梱）を使用するか、グローバルにインストールします。

# Corepack (recommended):
corepack enable
corepack prepare pnpm@latest --activate

# Or:
npm install -g pnpm

ワークスペースの設定

ルートに pnpm-workspace.yaml を作成し、パッケージを含むフォルダーを一覧にします。

# pnpm-workspace.yaml
packages:
  - 'apps/*'
  - 'packages/*'
  - '!**/test/**'

プロジェクト構成

各アプリとパッケージには、それぞれ独自の package.json があります。ルートには、共有する devDeps を含むワークスペース用の package.json を置きます。

my-monorepo/
  pnpm-workspace.yaml
  package.json         (root, private: true)
  apps/
    web/
      package.json
    docs/
      package.json
  packages/
    ui/
      package.json
    config-eslint/
      package.json

依存関係のインストール

ルートで pnpm install を 1 回実行します。pnpm はすべてのパッケージの依存関係をインストールし、共通の依存関係をホイストします。

pnpm install

# Install only in one workspace:
pnpm --filter web add react-router-dom

# Install dev dep at root:
pnpm add -Dw typescript prettier

workspace: プロトコル

内部パッケージは workspace:* で参照します。pnpm はローカルパッケージとして解決し、公開時には実際のバージョンに置き換えます。

// apps/web/package.json
{
  "dependencies": {
    "@repo/ui": "workspace:*",
    "@repo/utils": "workspace:^1.0.0"
  }
}

// On publish, workspace:* becomes the actual version of @repo/ui.

パッケージ間でのスクリプト実行

pnpm -r はすべてのパッケージでスクリプトを実行します。対象を絞るには --filter を使用します。

# Run build in every package:
pnpm -r build

# Only in web and its deps:
pnpm --filter web... build

# Run lint in changed packages since main:
pnpm --filter ...[origin/main] lint

厳密な依存関係の解決

デフォルトでは、pnpm はシンボリックリンクを使用するため、パッケージから見えるのは package.json に明示的に記載した依存関係だけです。パッケージ間の依存関係が意図せず漏れることがありません。これは npm と yarn classic ではどちらも起こり得る問題です。

hoist パターン

デフォルトでは pnpm は何もホイストしません。推移的な依存関係を利用可能にする必要がある場合（グローバルな TypeScript など）は、.npmrc に shamefully-hoist=true（可能なら避けてください）を追加するか、特定の public-hoist-pattern を使用します。

依存関係の更新

pnpm update は semver の範囲内で更新します。pnpm update -L は caret を無視して最新バージョンに更新します。

pnpm update                      # update all
pnpm --filter web update react   # only react, only web
pnpm update -L                   # latest (ignore caret)

Turborepo との組み合わせ

pnpm はワークスペースとインストールを提供し、Turborepo はタスクのオーケストレーションとキャッシュを提供します。両者は非常に相性がよく、ほとんどの JavaScript モノレポで一緒に使われています。

# pnpm install dependencies
pnpm install

# Turborepo runs the tasks across the workspace:
pnpm turbo run build --filter=web...

CI のヒント

CI を高速化するため、pnpm のコンテンツアドレス方式のストア（~/.local/share/pnpm/store）をキャッシュしてください。pnpm-lock.yaml が変更される場合に失敗させるには、--frozen-lockfile を使用します。

# .github/workflows/ci.yml
- uses: pnpm/action-setup@v3
  with: { version: 9 }
- uses: actions/setup-node@v4
  with: { node-version: '20', cache: 'pnpm' }
- run: pnpm install --frozen-lockfile
- run: pnpm -r build

簡単な確認

モノレポで npm/yarn と比べた場合、pnpm のディスク容量に関する主な利点は何でしょうか。

まとめ：pnpm ワークスペース

単一のコンテンツアドレス方式のストアとシンボリックリンクにより、高速なインストールと約 70% 少ないディスク使用量を実現します。pnpm-workspace.yaml にはパッケージのフォルダーを記載します。内部依存関係には workspace:* プロトコルを使用します。pnpm -r はすべてのパッケージでスクリプトを実行し、--filter で対象を絞れます。厳密な解決により、依存関係の漏れを防げます。タスクのオーケストレーションには Turborepo と組み合わせます。CI では --frozen-lockfile を使用してください。

よくある質問

「Monorepo向けpnpm Workspaces」レッスンは無料ですか？

はい。「Monorepo向けpnpm Workspaces」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「Monorepo向けpnpm Workspaces」で何を学びますか？

ルートのpnpm-workspace.yamlを備えたpnpm workspaceを設定し、共有依存関係をホイストして、workspace:プロトコルでローカルパッケージをリンクします。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「Monorepo向けpnpm Workspaces」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る