mcpField
T
turborepo

turborepo

github.com/mindrally開発289674 回インストール3 週間前に更新
リポジトリ

turborepo について

Turborepo を使った JavaScript と TypeScript のモノレポ開発向けスキルです。ワークスペース構成、タスクパイプライン、キャッシュ、CI/CD の設定を扱います。

主な機能

  1. 01モノレポのワークスペース構成
  2. 02タスク依存関係の設定
  3. 03ローカル・リモートキャッシュ
  4. 04ワークスペース別のコマンド実行
  5. 05CI/CD と環境変数の設定

活用シーン

  1. 01Turborepo モノレポの構築
  2. 02ビルドと lint の実行順設定
  3. 03キャッシュによる CI ビルド改善
  4. 04指定ワークスペースでのコマンド実行

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/mindrally/skills --skill turborepo

インストール後、Claude Code で/turborepoを入力して読み込まれたか確認します。

詳細

Turborepo の開発

JavaScript と TypeScript のモノレポ向け高性能ビルドシステムである Turborepo のエキスパートです。

プロジェクト構成

  • 標準的な Turborepo の構成に従ってワークスペースを整理します。
    • apps/ - アプリケーションのワークスペース（ウェブアプリ、API、モバイルアプリ）
    • packages/ - 共有パッケージ（UI コンポーネント、ユーティリティ、設定）
    • tooling/ - ビルドツールと設定（任意）
  • ルートの package.json はワークスペース設定のみを含む最小限のものにします。
  • すべてのワークスペースで一貫した命名規則を使用します。

ワークスペースの設定

  • ルートの package.json でワークスペースを定義します。 
    {
  "workspaces": ["apps/*", "packages/*"]
}
  • 各ワークスペースに、適切な依存関係を含む独自の package.json を用意します。
  • ワークスペースプロトコルを使用して、内部パッケージを参照します。例："@repo/ui": "workspace:*"

turbo.json の設定

{
  "$schema": "https://turbo.build/schema.json",
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**", ".next/**", "!.next/cache/**"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    },
    "lint": {},
    "test": {
      "dependsOn": ["build"]
    }
  }
}
  • トポロジカルな依存関係（最初に依存先をビルド）には、^ プレフィックスを使用します。
  • キャッシュ用に適切な outputs を定義します。
  • 開発タスクには cache: false と persistent: true を設定します。

キャッシュ戦略

  • CI/CD で Vercel またはセルフホスト可能なソリューションを使って、リモートキャッシュを設定します。
  • 正確な outputs 配列を定義して、適切にキャッシュがヒットするようにします。
  • タスクのキャッシュに影響するファイルを指定するには、inputs を使用します。
  • キャッシュディレクトリを outputs から除外します（例：!.next/cache/**）。

タスクの依存関係

  • dependsOn を使用して、タスク間の関係を定義します。
    • "^build" - 依存先のビルドを先に実行します。
    • "lint" - 同じパッケージ内で lint を実行します。
    • "@repo/ui#build" - 特定のパッケージでビルドを実行します。
  • 複雑なビルドパイプラインでは、適切なタスクの実行順序を定義します。

共有設定

  • 共有設定パッケージを作成します。
    • @repo/typescript-config - 共有 TypeScript 設定
    • @repo/eslint-config - 共有 ESLint 設定
    • @repo/tailwind-config - 共有 Tailwind 設定
  • ワークスペースの設定では、extends またはインポートを使用して設定を参照します。

開発ワークフロー

  • turbo dev を使用して、ワークスペース全体で開発サーバーを実行します。
  • コマンドを特定のワークスペースに絞り込みます：turbo build --filter=web
  • パターンを使って --filter を指定します：turbo build --filter=./apps/*
  • 継続的にビルドするには、turbo watch でウォッチモードを使用します。

CI/CD との統合

  • ビルドを高速化するために、CI でリモートキャッシュを有効にします。
  • 実行される内容を事前に確認するには、--dry-run を使用します。
  • globalEnv と env を使って、環境変数を適切に処理します。
  • GitHub Actions またはその他の CI を、Turborepo のキャッシュとともに設定します。

ベストプラクティス

  • 類似したワークスペース間で、タスク定義に一貫性を持たせます。
  • パッケージ固有のオーバーライドには、ワークスペースレベルの turbo.json を使用します。
  • ルートレベルの依存関係は最小限にし、必要なワークスペースにインストールします。
  • README ファイルに、各ワークスペースの用途と関連性を記載します。
  • 型チェックを高速化するために、TypeScript のプロジェクト参照を使用します。
  • 大規模なコードベースでは、インクリメンタルビルドを導入します。

コメント

Markdown 対応