pnpm入門 - 高速パッケージマネージャー

このチュートリアルで学ぶこと

• pnpmのインストール
• 基本コマンド
• ワークスペース設定
• npmからの移行

Step 1: インストール

# npm
npm install -g pnpm

# Homebrew
brew install pnpm

# corepack（Node.js 16.13+）
corepack enable
corepack prepare pnpm@latest --activate

Step 2: 基本コマンド

# パッケージインストール
pnpm install

# 依存関係追加
pnpm add express
pnpm add -D typescript

# 削除
pnpm remove express

# スクリプト実行
pnpm run dev
pnpm dev # runは省略可能

# 更新
pnpm update
pnpm update --latest

Step 3: ワークスペース設定

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

// package.json
{
 "name": "my-monorepo",
 "private": true,
 "scripts": {
 "dev": "pnpm -r dev",
 "build": "pnpm -r build"
 }
}

Step 4: ワークスペース内操作

# 特定パッケージにインストール
pnpm add lodash --filter web

# 内部パッケージを参照
pnpm add @repo/ui --filter web --workspace

# 全パッケージで実行
pnpm -r run build

# 並列実行
pnpm -r --parallel run dev

Step 5: package.jsonの依存関係

workspace:*プロトコルを使うと、ローカルパッケージを自動的にリンクできます。

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

Step 6: npmからの移行

# node_modules削除
rm -rf node_modules

# package-lock.json削除
rm package-lock.json

# pnpmでインストール
pnpm import # package-lock.jsonから変換
pnpm install

Step 7: 設定ファイル

shamefully-hoistは、一部のパッケージがフラットなnode_modules構造を前提としている場合に必要です。

# .npmrc
shamefully-hoist=true
strict-peer-dependencies=false
auto-install-peers=true

ベストプラクティス

• corepackで管理
• pnpm-lock.yamlをコミット
• .npmrcでプロジェクト設定
• workspace:*で内部参照

workspace設計のポイント

pnpm workspaceでは、依存関係をどこに置くかが重要です。全パッケージで使うツールはルート、特定パッケージだけで使うライブラリはそのパッケージに置くと、依存関係が読みやすくなります。

内部パッケージ同士はworkspaceプロトコルで参照すると、ローカル開発と公開時の整合性を保ちやすくなります。共通UI、共通型、設定パッケージを分けると、モノレポ全体の重複を減らせます。

運用で見ること

• ルートに不要な依存関係を集めすぎていないか
• 内部パッケージのバージョン管理方針があるか
• lockfileを必ずコミットしているか
• CIでpnpmのバージョンを固定しているか

まとめ

pnpmはディスク効率が良く高速なパッケージマネージャーです。ワークスペース機能でモノレポも簡単に管理できます。

参考リソース

• pnpm 公式ドキュメント
• pnpm Workspaces ガイド
• pnpm CLI リファレンス
• pnpm GitHub

×

PR

×

PR