การสร้าง Nx Monorepo ด้วยแอป React

เหตุใดจึงใช้ Nx

การสร้างพื้นที่ทำงาน Nx ใหม่

# Create workspace:
npx create-nx-workspace@latest myorg --preset=react-monorepo
# or for Next.js:
npx create-nx-workspace@latest myorg --preset=next

โครงสร้างพื้นที่ทำงาน

myorg/
  apps/
    web/           # React SPA
    admin/         # Admin React SPA
    api/           # NestJS backend
  libs/
    ui/            # shared UI components
    data-access/   # data fetching hooks
    utils/         # shared utilities
  nx.json          # workspace config
  package.json     # single package.json

การเพิ่มแอป React

# Add a new React app:
npx nx generate @nx/react:app customer-portal

# Add a Next.js app:
npx nx generate @nx/next:app marketing

การเรียกใช้งาน

# Serve a specific app:
npx nx serve web

# Build all apps:
npx nx run-many --target=build --all

# Test a specific library:
npx nx test ui

กราฟโปรเจกต์

npx nx graph

การแคชของ Nx

# First run: builds and caches
npx nx build web  # ~30s

# Second run (no changes): cache hit
npx nx build web  # <1s — served from cache

ไปป์ไลน์ของงาน

// nx.json
{
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"], // run dependency builds first
      "cache": true
    },
    "test": {
      "cache": true
    }
  }
}

แท็กสำหรับการบังคับใช้

// project.json
{
  "tags": ["scope:web", "type:app"]
}

// .eslintrc.json
{
  "rules": {
    "@nx/enforce-module-boundaries": ["error", {
      "depConstraints": [
        { "sourceTag": "type:app", "onlyDependOnLibsWithTags": ["type:lib"] }
      ]
    }]
  }
}

นามแฝงเส้นทาง TypeScript

// tsconfig.base.json (auto-generated)
{
  "compilerOptions": {
    "paths": {
      "@myorg/ui": ["libs/ui/src/index.ts"],
      "@myorg/utils": ["libs/utils/src/index.ts"]
    }
  }
}

// Usage in apps:
import { Button } from '@myorg/ui';

ตรวจสอบความเข้าใจ

ทบทวน