Claude Code के साथ pnpm

pnpmワークスペースでモノレポ buildする

pnpmは厳密な依存解決とディスク効率の良さで人気のpackageマネージャー है।ワークスペースfeaturesを使えば、addツールなしでモノレポをmanagementでき है।Claude Code का उपयोग करके、pnpmワークスペースの構成をefficiently進めましょう。

ワークスペースの初期settings

> pnpm workspacesでモノレポをबनाओ。
> 構成：
> - apps/web: React SPA
> - apps/admin: management画面
> - packages/ui: 共通component
> - packages/config: 共通settings

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

// package.json (route)
{
  "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"
  }
}

packageबीचの依存management

> webアプリ सेuipackagereferenceするsettingsをして。
> TypeScriptのpath解決もsetupして。

// 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:* プロトコル से、常にlocalのpackageが参照され है।公開時には実際のversion番号に自動置換され है।

フィルタリングとスクリプト実行

pnpmのフィルタfeaturesで特定packageのみを操作でき है।

# 特定packageのdev実行
pnpm --filter @myapp/web dev

# 依存packageも含めてbuild
pnpm --filter @myapp/web... build

# 変更があったpackageのみtest
pnpm --filter "...[origin/main]" test

# 複数packageの指定
pnpm --filter "@myapp/web" --filter "@myapp/admin" build

Changesetsでversionmanagement

> changesetsをintroductionして、packageの公開フローを整備して。

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"
}

# 変更セットのcreate
pnpm changeset

# versionのupdate
pnpm changeset version

# 公開
pnpm -r publish --access public

.npmrcのoptimization

> pnpmのsettingsをoptimizationして。strict-peer-depsと
> hoistのsettingsをappropriateにして。

# .npmrc
strict-peer-dependencies=false
auto-install-peers=true
shamefully-hoist=false
link-workspace-packages=true
prefer-workspace-packages=true

shamefully-hoist=false はpnpmの厳密な依存解決を維持するimportantなsettings है।暗黙的な依存をcode से排除でき है।

Summary

pnpmワークスペースは、シンプルながらpowerfulなモノレポmanagementを実現し है।Claude Code का उपयोग करके、dependenciesのsettingsやCI構成もスムーズに進められ है।モノレポmanagementの実践ガイドや依存managementのベストプラクティスも合わせてreference के लिए देखें。

pnpmके details के लिएpnpmofficial documentationをदेखें。