Claude Code के साथ and Managing Nx Workspaces Build करना

Nxワークスペースのbuildको Claude Code से Efficient बनाएं

NxはNrwlがdevelopmentするモノレポmanagementツールで、豊富なpluginエコシステムと高度なbuildグラフ解析が特徴 है।Claude Code के साथ combineる बातで、Nxの多featuresさを最大限に活かせ है।

ワークスペースの初期setup

> Nxワークスペースを新規बनाओ。
> 構成：
> - apps/frontend: React + Vite
> - apps/backend: NestJS API
> - libs/shared-types: 共通type definitions
> - libs/ui-components: 共通UIcomponent

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

# pluginのadd
nx add @nx/react
nx add @nx/nest

Projectのaddとジェネレーターutilization

Nxのジェネレーターを使えば、一貫した構成でProjectをaddでき है।

> Reactapplicationをadd करो。Vitestでtestもsettingsして。

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

# libraryのgenerate
nx g @nx/react:lib ui-components \
  --unitTestRunner=vitest \
  --publishable \
  --importPath=@my-workspace/ui-components

project.jsonのsettings

> frontendアプリのbuildsettingsをoptimizationして。
> environment variablesの切り替えとソースマップのsettingsもadd करो。

{
  "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のpowerfulな依存グラフ解析をutilizationし है।

> 変更の影響を受けるProjectだけtestを実行する
> CIpipelineを作って。

# 影響を受けるProjectのconfirm
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

カスタムジェネレーターのcreate

Project固有のボイラープレートをジェネレーター化でき है।

> APIendpointをaddするカスタムジェネレーターを作って。
> コントローラ、service、DTOのfileを自動generateしたい。

// 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: '' }
  );
}

Summary

Claude Code का लाभ उठाकर、Nxの豊富なfeaturesを素早く理解し、効率的なモノレポ環境 build किया जा सकता है。モノレポmanagementの基本やTypeScriptdevelopmentのコツभी reference के लिए देखें。

Nxके details के लिएNxofficial documentationをदेखें。