pnpm Workspace con Claude Code
Aprenda sobre pnpm Workspace usando Claude Code. Incluye consejos practicos y ejemplos de codigo.
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の厳密な依存解決を維持する重要な設定です。暗黙的な依存をコードから排除できます。
Summary
pnpmワークスペースは、シンプルながら強力なモノレポ管理を実現します。Claude Codeを使えば、依存関係の設定やCI構成もスムーズに進められます。モノレポ管理の実践ガイドや依存管理のベストプラクティスも合わせて参考にしてください。
pnpmの詳細はpnpm公式ドキュメントを参照してください。
PDF gratuito: Hoja de trucos de Claude Code en 5 minutos
Solo deja tu correo y te enviaremos al instante la hoja de trucos en una página A4.
Cuidamos tus datos personales y nunca enviamos spam.
Sobre el autor
Masa
Ingeniero apasionado por Claude Code. Dirige claudecode-lab.com, un medio tecnológico en 10 idiomas con más de 2.000 páginas.
Artículos relacionados
7 comprobaciones antes de publicar cada día un artículo multilingüe sobre Claude Code
Una lista práctica para publicar artículos multilingües sobre Claude Code todos los días sin olvidar idiomas, romper CTAs ni dejar páginas antiguas en producción.
Que es Codex Automations y como dejar que la IA gestione contenido mientras duermes
Guia practica para usar Codex Automations en analitica, articulos, CTA, despliegue y monetizacion.
Claude Code × GCP Cloud Functions Guía Completa | Desarrollo Serverless Ultrarrápido
Optimiza GCP Cloud Functions con Claude Code. Implementa triggers HTTP/Pub/Sub/Firestore, pruebas locales y automatización de despliegues con ejemplos de código reales de la experiencia de Masa.