如何Efficiently Manage Monorepos：Claude Code 实战指南

モノレポ管理の複雑さを通过 Claude Code解決

モノレポは複数の包を一元管理できる反面、配置の複雑さが課題です。借助 Claude Code，初期构建から日々の维护まで高效地進められます。

モノレポの初期セットアップ

> Turborepo + pnpm workspaces でモノレポを构建して。
> 以下包结构で：
> - apps/web: Next.js前端
> - apps/api: Express 后端
> - packages/ui: 共通UI组件
> - packages/shared: 共通类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类型定義・ユーティリティ
> - packages/config: ESLint、TypeScript、Prettier の共通配置

ルートの配置

// 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/*"

共通包の创建

> packages/shared に共通の类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类型定義とユーティリティ创建。
> 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"
  }
}

共通配置の一元化

> ESLint、TypeScript、Prettierの配置を
> 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"],
};

包間の依存関係添加

> apps/web に packages/ui と packages/shared への
> 依存関係添加、导入が動くようにして。

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

新しい包の添加

> packages/logger という新しい包创建。
> 構造化日志を输出するユーティリティ。
> 他の包と同じ配置パターンに合わせて。

Claude Code 既存包の结构を分析し、一貫したパターンで新規包を创建します。

モノレポ全体の维护

> モノレポ全体の依存包を更新して。
> 包間の整合性を保ちながら。
> 更新後に全包の测试が通ることを确认。

# Claude Codeが実行するコマンド
pnpm -r update
pnpm turbo run build
pnpm turbo run test
pnpm turbo run type-check

CI/CDでのモノレポ支持相关内容请参阅CI/CD流水线构建指南を、Next.js应用の开发はNext.js全栈开发。日々の开发効率を上げるコツは生産性を3倍にする10のTips也请一并查看。

总结

Claude Code モノレポの初期构建から日々の维护まで幅広く支持可以。共通配置の一元管理、包間の依存関係管理、全体の整合性チェックなど、モノレポ特有の複雑さをClaude Code 解決します。

Turborepo的详细信息请参阅Turborepo官方文档、让 Claude CodeついてはAnthropic官方文档。