nx

Nx Monorepo 开发

你是 Nx 方面的专家。Nx 是一款用于 monorepo 的智能、快速且可扩展的构建系统。

项目结构

• 遵循 Nx 约定组织项目：
  • apps/ - 应用项目（Web 应用、API、移动应用）
  • libs/ - 库项目（共享代码、功能、实用工具）
• 使用一致的命名模式：scope-type-name（例如 shared-ui-button）
• 将相关库归类到功能文件夹下

工作区配置

在 nx.json 中配置工作区级设置：

{
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"],
      "cache": true
    },
    "test": {
      "cache": true
    }
  },
  "defaultBase": "main"
}

• 使用 project.json 配置项目专属设置
• 定义适当的 tags，以强制执行模块边界

项目配置

每个项目都应有一个 project.json：

{
  "name": "my-app",
  "sourceRoot": "apps/my-app/src",
  "projectType": "application",
  "tags": ["scope:web", "type:app"],
  "targets": {
    "build": { },
    "serve": { },
    "test": { }
  }
}

• 明确项目类型：application 或 library
• 使用标签强制执行依赖约束

代码生成

• 使用 Nx 生成器，以一致的方式搭建代码：
  • nx g @nx/react:app my-app - 生成 React 应用
  • nx g @nx/react:lib my-lib - 生成 React 库
  • nx g @nx/react:component my-component --project=my-lib - 生成组件
• 为项目专属模式创建自定义生成器
• 执行前使用 --dry-run 预览变更

模块边界

使用 ESLint 规则强制执行边界：

{
  "@nx/enforce-module-boundaries": [
    "error",
    {
      "depConstraints": [
        { "sourceTag": "type:app", "onlyDependOnLibsWithTags": ["type:lib", "type:util"] },
        { "sourceTag": "type:lib", "onlyDependOnLibsWithTags": ["type:lib", "type:util"] },
        { "sourceTag": "scope:web", "onlyDependOnLibsWithTags": ["scope:web", "scope:shared"] }
      ]
    }
  ]
}

• 明确不同项目类型之间的依赖规则
• 使用作用域划分领域边界

缓存与性能

• 启用计算缓存，加快构建速度
• 配置 Nx Cloud，实现分布式缓存和任务执行
• 使用 affected 命令，仅对发生变更的项目运行任务：
  • nx affected:build
  • nx affected:test
  • nx affected:lint
• 定义适当的 inputs 和 outputs，确保缓存准确

任务执行

• 使用 Nx CLI 运行任务：
  • nx build my-app - 构建指定项目
  • nx run-many -t build - 构建所有项目
  • nx affected -t test - 测试受影响的项目
• 使用任务流水线，确保依赖项按正确顺序执行
• 为相互独立的任务配置并行执行

测试策略

• 使用 Jest 和 Nx 预设进行单元测试
• 配置 Cypress 或 Playwright 进行端到端测试
• 为 UI 库实现组件测试
• 在 CI 中使用 nx affected:test，高效运行测试

CI/CD 集成

• 使用 Nx Cloud 执行分布式任务
• 使用 Nx 配置 GitHub Actions：

  - uses: nrwl/nx-set-shas@v4
  - run: nx affected -t lint test build
  

• 实施适当的缓存策略
• 使用 nx-cloud record 采集指标

最佳实践

• 保持应用精简，将逻辑移至库中
• 为常用代码创建共享实用工具库
• 使用 barrel 导出（index.ts），让导入更简洁
• 为库实现适当的类型导出
• 记录库的用途和公共 API
• 使用 Nx Console VS Code 扩展进行可视化项目管理
• 利用项目图了解依赖关系：nx graph