pnpm with Claude Code
Learn about pnpm using Claude Code. Practical tips and code examples included.
pnpmワークスペースでモノレポを構築する
pnpmは厳密な依存解決とディスク効率の良さで人気のパッケージマネージャーです。ワークスペース機能を使えば、追加ツールなしでモノレポを管理できます。Claude Codeを活用して、pnpmワークスペースの構成を効率的に進めましょう。
ワークスペースの初期設定
> pnpm workspacesでモノレポを作成して。
> 構成:
> - apps/web: React SPA
> - apps/admin: 管理画面
> - packages/ui: 共通コンポーネント
> - packages/config: 共通設定
# pnpm-workspace.yaml
packages:
- 'apps/*'
- 'packages/*'
// package.json (ルート)
{
"name": "my-monorepo",
"private": true,
"scripts": {
"dev": "pnpm -r --parallel dev",
"build": "pnpm -r build",
"lint": "pnpm -r lint",
"test": "pnpm -r test"
},
"devDependencies": {
"typescript": "^5.5.0"
}
}
パッケージ間の依存管理
> webアプリからuiパッケージを参照する設定をして。
> TypeScriptのパス解決もセットアップして。
// apps/web/package.json
{
"name": "@myapp/web",
"dependencies": {
"@myapp/ui": "workspace:*",
"@myapp/config": "workspace:*"
}
}
// packages/ui/package.json
{
"name": "@myapp/ui",
"main": "./src/index.ts",
"types": "./src/index.ts",
"exports": {
".": {
"import": "./src/index.ts",
"types": "./src/index.ts"
}
}
}
workspace:* プロトコルにより、常にローカルのパッケージが参照されます。公開時には実際のバージョン番号に自動置換されます。
フィルタリングとスクリプト実行
pnpmのフィルタ機能で特定パッケージのみを操作できます。
# 特定パッケージのdev実行
pnpm --filter @myapp/web dev
# 依存パッケージも含めてビルド
pnpm --filter @myapp/web... build
# 変更があったパッケージのみテスト
pnpm --filter "...[origin/main]" test
# 複数パッケージの指定
pnpm --filter "@myapp/web" --filter "@myapp/admin" build
Changesetsでバージョン管理
> changesetsを導入して、パッケージの公開フローを整備して。
pnpm add -Dw @changesets/cli
pnpm changeset init
// .changeset/config.json
{
"$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
"changelog": "@changesets/cli/changelog",
"commit": false,
"fixed": [],
"linked": [["@myapp/ui", "@myapp/config"]],
"access": "restricted",
"baseBranch": "main",
"updateInternalDependencies": "patch"
}
# 変更セットの作成
pnpm changeset
# バージョンの更新
pnpm changeset version
# 公開
pnpm -r publish --access public
.npmrcの最適化
> pnpmの設定を最適化して。strict-peer-depsと
> hoistの設定を適切にして。
# .npmrc
strict-peer-dependencies=false
auto-install-peers=true
shamefully-hoist=false
link-workspace-packages=true
prefer-workspace-packages=true
shamefully-hoist=false はpnpmの厳密な依存解決を維持する重要な設定です。暗黙的な依存をコードから排除できます。
Zusammenfassung
pnpmワークスペースは、シンプルながら強力なモノレポ管理を実現します。Claude Codeを使えば、依存関係の設定やCI構成もスムーズに進められます。モノレポ管理の実践ガイドや依存管理のベストプラクティスも合わせて参考にしてください。
pnpmの詳細はpnpm公式ドキュメントを参照してください。
Kostenloses PDF: Claude-Code-Spickzettel in 5 Minuten
Trag einfach deine E-Mail-Adresse ein – wir senden dir den A4-Spickzettel als PDF sofort zu.
Wir behandeln deine Daten sorgfältig und senden niemals Spam.
Über den Autor
Masa
Ingenieur, der Claude Code intensiv nutzt. Betreibt claudecode-lab.com, ein Tech-Medium in 10 Sprachen mit über 2.000 Seiten.
Ähnliche Artikel
7 Prüfungen, bevor du täglich einen mehrsprachigen Claude-Code-Artikel veröffentlichst
Eine praktische Checkliste, damit tägliche mehrsprachige Claude-Code-Artikel nicht an fehlenden Sprachen, kaputten CTAs oder veralteten Live-Seiten scheitern.
Was sind Codex Automations? Content Ops mit KI planen und ausfuehren
Praktischer Leitfaden fuer Codex Automations: Analytics, Themenwahl, Artikel, CTA, Deployment und Monetarisierung.
Claude Code × GCP Cloud Functions Komplettanleitung | Serverlose Funktionen blitzschnell entwickeln
GCP Cloud Functions mit Claude Code optimieren. HTTP/Pub/Sub/Firestore-Trigger implementieren, lokal testen und Deployments automatisieren — mit echten Codebeispielen aus Masas Praxiserfahrung.