构建and Managing Nx Workspaces：Claude Code 实战指南

Nxワークスペースの构建を通过 Claude Code 提高效率

NxはNrwlが开发するモノレポ管理ツールで、豊富な插件エコシステムと高度な构建グラフ解析が特徴です。与 Claude Code組み合わせることで、Nxの多機能さを最大限に活かせます。

ワークスペースの初期セットアップ

> Nxワークスペースを新規创建して。
> 结构：
> - apps/frontend: React + Vite
> - apps/backend: NestJS API
> - libs/shared-types: 共通类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类型定義
> - libs/ui-components: 共通UI组件

# Nxワークスペースの作成
npx create-nx-workspace@latest my-workspace \
  --preset=integrated \
  --nxCloud=skip

# プラグインの追加
nx add @nx/react
nx add @nx/nest

项目の添加とジェネレーター活用

Nxのジェネレーターを使えば、一貫した结构で项目を添加可以。

> React应用添加。Vitestで测试も配置して。

# Reactアプリの生成
nx g @nx/react:app frontend \
  --bundler=vite \
  --unitTestRunner=vitest \
  --e2eTestRunner=playwright \
  --style=css

# ライブラリの生成
nx g @nx/react:lib ui-components \
  --unitTestRunner=vitest \
  --publishable \
  --importPath=@my-workspace/ui-components

project.jsonの配置

> frontend应用の构建配置を优化して。
> 环境变量の切换とソースマップの配置も添加して。

{
  "name": "frontend",
  "targets": {
    "build": {
      "executor": "@nx/vite:build",
      "options": {
        "outputPath": "dist/apps/frontend",
        "generatePackageJson": false
      },
      "configurations": {
        "production": {
          "mode": "production",
          "sourcemap": false
        },
        "development": {
          "mode": "development",
          "sourcemap": true
        }
      }
    },
    "serve": {
      "executor": "@nx/vite:dev-server",
      "defaultConfiguration": "development"
    }
  }
}

影響範囲の分析と选择的実行

Nxの強力な依存グラフ解析を活用します。

> 更改の影響を受ける项目だけ测试を実行する
> CI流水线を作って。

# 影響を受けるプロジェクトの確認
nx affected --target=test --base=main

# 依存グラフの可視化
nx graph

# 並列実行数の指定
nx affected --target=build --parallel=5

# .github/workflows/ci.yml
name: CI
on: [pull_request]
jobs:
  affected:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - uses: nrwl/nx-set-shas@v4
      - run: npm ci
      - run: npx nx affected -t lint test build --parallel=3

カスタムジェネレーターの创建

项目固有の模板代码をジェネレーター化可以。

> API端点を添加するカスタムジェネレーターを作って。
> コントローラ、サービス、DTOの文件を自動生成したい。

// tools/generators/api-endpoint/index.ts
import { Tree, generateFiles, joinPathFragments, names } from '@nx/devkit';

interface Schema {
  name: string;
  project: string;
}

export default async function (tree: Tree, schema: Schema) {
  const { className, fileName } = names(schema.name);
  const projectRoot = `apps/${schema.project}/src`;

  generateFiles(
    tree,
    joinPathFragments(__dirname, 'files'),
    joinPathFragments(projectRoot, fileName),
    { className, fileName, template: '' }
  );
}

总结

Claude Codeを活用すれば、Nxの豊富な機能を快速理解し、効率的なモノレポ環境を构建可以。モノレポ管理の基本やTypeScript开发のコツ也可以参考。

Nx的详细信息请参阅Nx官方文档。