nx

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Nx Monorepo Development

Nx 单体仓库（Monorepo）开发

You are an expert in Nx, the smart, fast, and extensible build system for monorepos.

您是Nx领域的专家，Nx是一款智能、快速且可扩展的单体仓库构建系统。

Project Structure

项目结构

Organize projects following Nx conventions:
- ```
apps/
```
  - Application projects (web apps, APIs, mobile apps)
- ```
libs/
```
  - Library projects (shared code, features, utilities)
Use consistent naming patterns:
```
scope-type-name
```
(e.g.,
```
shared-ui-button
```
)
Group related libraries under feature folders

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

Workspace Configuration

工作区配置

Configure

nx.json

for workspace-wide settings:

json

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

Use
```
project.json
```
for project-specific configuration
Define proper
```
tags
```
for enforcing module boundaries

配置

nx.json

以设置工作区全局参数：

json

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

使用
```
project.json
```
进行项目专属配置
定义合适的
```
tags
```
以强制实施模块边界

Project Configuration

项目配置

Each project should have a

project.json

json

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

Define clear project types:
```
application
```
or
```
library
```
Use tags for enforcing dependency constraints

每个项目都应包含

project.json

：

json

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

明确定义项目类型：
```
application
```
（应用）或
```
library
```
（库）
使用tags强制实施依赖约束

Code Generation

代码生成

Use Nx generators for consistent code scaffolding:
- ```
nx g @nx/react:app my-app
```
  - Generate React application
- ```
nx g @nx/react:lib my-lib
```
  - Generate React library
- ```
nx g @nx/react:component my-component --project=my-lib
```
  - Generate component
Create custom generators for project-specific patterns
Use
```
--dry-run
```
to preview changes before execution

使用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
```
参数在执行前预览更改

Module Boundaries

模块边界

Enforce boundaries using ESLint rules:

json

{
  "@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"] }
      ]
    }
  ]
}

Define clear dependency rules between project types
Use scopes to separate domain boundaries

使用ESLint规则强制实施边界：

json

{
  "@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"] }
      ]
    }
  ]
}

明确项目类型之间的依赖规则
使用作用域（scope）分离领域边界

Caching and Performance

缓存与性能

Enable computation caching for faster builds
Configure Nx Cloud for distributed caching and task execution
Use affected commands to only run tasks for changed projects:
- ```
nx affected:build
```
- ```
nx affected:test
```
- ```
nx affected:lint
```
Define proper
```
inputs
```
and
```
outputs
```
for accurate caching

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

Task Execution

任务执行

Run tasks with Nx CLI:
- ```
nx build my-app
```
  - Build specific project
- ```
nx run-many -t build
```
  - Build all projects
- ```
nx affected -t test
```
  - Test affected projects
Use task pipelines for proper dependency ordering
Configure parallel execution for independent tasks

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

Testing Strategy

测试策略

Use Jest for unit testing with Nx presets
Configure Cypress or Playwright for E2E testing
Implement component testing for UI libraries
Use
```
nx affected:test
```
in CI for efficient test runs

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

CI/CD Integration

CI/CD集成

Use Nx Cloud for distributed task execution

Configure GitHub Actions with Nx:

yaml

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

Implement proper caching strategies
Use
```
nx-cloud record
```
for capturing metrics

使用Nx Cloud实现分布式任务执行

结合Nx配置GitHub Actions：

yaml

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

实施合适的缓存策略
使用
```
nx-cloud record
```
捕获指标

Best Practices

最佳实践

Keep applications thin; move logic to libraries
Create shared utility libraries for common code
Use barrel exports (
```
index.ts
```
) for clean imports
Implement proper type exports from libraries
Document library purposes and public APIs
Use Nx Console VS Code extension for visual project management
Leverage the project graph for understanding dependencies:
```
nx graph
```

保持应用轻量化；将业务逻辑迁移至库中
创建共享工具库存放通用代码
使用桶导出（
```
index.ts
```
）实现清晰的导入
从库中正确导出类型
记录库的用途与公共API
使用Nx Console VS Code扩展进行可视化项目管理
利用项目图谱理解依赖关系：
```
nx graph
```