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の依存関係

// 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: 設定ファイル

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

ベストプラクティス

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

まとめ

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