Claude Code के साथ Efficiently Manage Monorepos कैसे करें

モノレポmanagementのcomplexさको Claude Code से解決

モノレポは複数のpackageを一元managementできる反面、settingsのcomplexさが課題 है।Claude Code का उपयोग करके、初期build से日々のメンテナンス तकefficiently進められ है।

モノレポの初期setup

> Turborepo + pnpm workspaces でモノレポ buildして。
> निम्नलिखितのpackage構成で：
> - apps/web: Next.jsフロントエンド
> - apps/api: Express バックエンド
> - packages/ui: 共通UIcomponent
> - packages/shared: 共通type definitions・utility
> - packages/config: ESLint、TypeScript、Prettier の共通settings

routeのsettings

// turbo.json
{
  "$schema": "https://turbo.build/schema.json",
  "globalDependencies": ["**/.env.*local"],
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**", ".next/**"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    },
    "lint": {
      "dependsOn": ["^build"]
    },
    "test": {
      "dependsOn": ["^build"]
    },
    "type-check": {
      "dependsOn": ["^build"]
    }
  }
}

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

共通packageのcreate

> packages/shared に共通のtype definitionsとutilityをबनाओ。
> apps/web と apps/api の両方 से使える तरह。

// packages/shared/src/types/user.ts
export interface User {
  id: string;
  email: string;
  name: string;
  role: "admin" | "editor" | "viewer";
  createdAt: Date;
}

export interface CreateUserInput {
  email: string;
  name: string;
  role: User["role"];
}

// packages/shared/src/utils/validation.ts
export function isValidEmail(email: string): boolean {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

export function sanitizeInput(input: string): string {
  return input.trim().replace(/<[^>]*>/g, "");
}

// packages/shared/src/index.ts
export * from "./types/user";
export * from "./utils/validation";

// packages/shared/package.json
{
  "name": "@myapp/shared",
  "version": "0.0.0",
  "main": "./src/index.ts",
  "types": "./src/index.ts",
  "scripts": {
    "build": "tsup src/index.ts --format cjs,esm --dts",
    "type-check": "tsc --noEmit"
  }
}

共通settingsの一元化

> ESLint、TypeScript、Prettierのsettingsを
> packages/config に集約して。
> 各app से extends で使える तरह。

// packages/config/eslint-preset.js
module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier",
  ],
  parser: "@typescript-eslint/parser",
  rules: {
    "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
    "@typescript-eslint/no-explicit-any": "error",
  },
};

// apps/web/.eslintrc.js で使用
module.exports = {
  extends: [require.resolve("@myapp/config/eslint-preset"), "next/core-web-vitals"],
};

packageबीचのdependenciesadd

> apps/web に packages/ui と packages/shared への
> dependenciesをadd करो、インポートが動く तरहして。

// apps/web/package.json
{
  "dependencies": {
    "@myapp/ui": "workspace:*",
    "@myapp/shared": "workspace:*"
  }
}

नयाpackageのadd

> packages/logger というनयाpackageをबनाओ。
> 構造化logを出力するutility。
> 他のpackageとsamesettingspatternに合わせて。

Claude Codeは既存packageの構成を分析し、一貫したpatternで新規package createし है।

モノレポ全体のメンテナンス

> モノレポ全体の依存package updateして。
> packageबीचの整合性を保ちながら。
> updateबादに全packageのtestが通る बात confirm。

# Claude Codeが実行するcommand
pnpm -r update
pnpm turbo run build
pnpm turbo run test
pnpm turbo run type-check

CI/CDでのモノレポsupportके बारे मेंはCI/CDpipelineconstruction guideを、Next.jsアプリのdevelopmentはNext.jsフルスタックdevelopmentをदेखें。日々のdevelopment効率をऊपरげるコツは生産性を3倍にする10のTipsもあわせてदेखें。

Summary

Claude Codeはモノレポの初期build से日々のメンテナンス तक幅広くsupportでき है।共通settingsの一元management、packageबीचのdependenciesmanagement、全体の整合性check आदि、モノレポ特有のcomplexさをClaude Codeが解決し है।

Turborepoके details के लिएTurborepoofficial documentation、Claude Codeके बारे मेंはAnthropicofficial documentationをदेखें。