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公式ドキュメントを参照してください。
Related Posts
So beschleunigen Sie Ihre Nebenprojekte mit Claude Code [Mit Beispielen]
Erfahren Sie, wie Sie persönliche Entwicklungsprojekte mit Claude Code drastisch beschleunigen. Inklusive realer Beispiele und eines praktischen Workflows von der Idee bis zum Deployment.
So automatisieren Sie Refactoring mit Claude Code
Erfahren Sie, wie Sie Code-Refactoring mit Claude Code effizient automatisieren. Inklusive praktischer Prompts und konkreter Refactoring-Muster für reale Projekte.
Vollständiger CORS-Konfigurationsleitfaden mit Claude Code
Erfahren Sie alles über die CORS-Konfiguration mit Claude Code. Mit praktischen Tipps und Codebeispielen.