Membangun and Managing Nx Workspaces dengan Claude Code

Nxworkspaceのpembangunan dengan Claude Code: efisiensi

Nx Nrwl pengembangan monorepomanajementools 、豊富なpluginエコsistem dan 高度なbuildgrafik解析 fitur.Claude Code dan 組み合わせるこ dan 、Nx 多機能さ 最大限 活かせ.

初期セットアップ workspace

> Nxworkspace 新規pembuatanして。
> 構成：
> - apps/frontend: React + Vite
> - apps/backend: NestJS API
> - libs/shared-types: 共通型definisi
> - libs/ui-components: 共通UIkomponen

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

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

penambahanとgeneratorpemanfaatan proyek

Nx generator 使えば、一貫 構成 proyek penambahan bisa dilakukan.

> Reactaplikasi tambahkan.Vitest dengan test konfigurasi juga.

# 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

pengaturan project.json

> frontendaplikasi buildpengaturan optimalkan.
> environment variable peralihan dan ソースマップ pengaturan tambahkan juga.

{
  "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 強力な依存grafik解析 pemanfaatan.

> 変更 影響 受けるproyekだけtest 実行する
> CIpipeline buatkan.

# 影響を受けるプロジェクトの確認
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

pembuatan カスタムgenerator

proyek固有 ボイラープレート generator化 bisa dilakukan.

> APIendpoint penambahanするカスタムgenerator buatkan.
> コントローラ、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

Dengan memanfaatkan Claude Code, Nx 豊富な機能 素早く理解し、efisienなmonorepo環境 pembangunan bisa dilakukan.monorepomanajemen dasarやTypeScriptpengembangan コツ juga bisa dijadikan referensi.

Untuk Nxの詳細, lihat Nx公式ドキュメント.