nx-monorepo by giuseppe-trisciuoglio/developer-kit
npx skills add https://github.com/giuseppe-trisciuoglio/developer-kit --skill nx-monorepo为在 TypeScript/JavaScript 项目中使用 Nx monorepo 提供全面的指导。Nx 是一个智能构建系统,具有高级缓存、受影响命令执行功能,并为 React、Next.js、NestJS 等提供强大的生成器。此技能涵盖工作区创建、项目生成、任务执行、缓存策略、模块联邦以及 CI/CD 集成。
在以下情况使用此技能:
触发短语: "create Nx workspace", "Nx monorepo", "generate Nx app", "Nx affected", "Nx CI/CD", "Module Federation Nx", "Nx Cloud"
通过交互式设置创建新工作区:
npx create-nx-workspace@latest
按照提示选择预设(集成式、独立式、基于包)和框架栈。
在现有项目中初始化 Nx:
nx@latest init
使用特定预设创建(非交互式):
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
npx create-nx-workspace@latest my-workspace --preset=react
生成 React 应用程序:
nx g @nx/react:app my-app
生成库:
# React 库
nx g @nx/react:lib my-lib
# TypeScript 库
nx g @nx/js:lib my-util
在库中生成组件:
nx g @nx/react:component my-comp --project=my-lib
生成 NestJS 后端:
nx g @nx/nest:app my-api
仅对受影响的项目运行任务:
nx affected -t lint test build
在所有项目中运行任务:
# 构建所有项目
nx run-many -t build
# 测试特定项目
nx run-many -t test -p=my-app,my-lib
# 按模式测试
nx run-many -t test --projects=*-app
在单个项目上运行特定目标:
nx run my-app:build
可视化依赖图:
nx graph
每个项目都有一个 project.json 文件,用于定义目标、执行器和配置:
{
"name": "my-app",
"projectType": "application",
"sourceRoot": "apps/my-app/src",
"targets": {
"build": {
"executor": "@nx/react:webpack",
"outputs": ["{workspaceRoot}/dist/apps/my-app"],
"configurations": {
"production": {
"optimization": true
}
}
},
"test": {
"executor": "@nx/vite:test"
}
},
"tags": ["type:app", "scope:frontend"]
}
设置项目依赖:
{
"targets": {
"build": {
"dependsOn": [
{ "projects": ["shared-ui"], "target": "build" }
]
}
}
}
使用标签进行组织:
{ "tags": ["type:ui", "scope:frontend", "platform:web"] }
生成远程应用(微前端):
nx g @nx/react:remote checkout --host=dashboard
生成宿主应用:
nx g @nx/react:host dashboard
在 CI 中使用受影响命令,仅构建/测试已更改的项目:
# .github/workflows/ci.yml
- run: npx nx affected -t lint --parallel
- run: npx nx affected -t test --parallel
- run: npx nx affected -t build --parallel
输入: "Create a new Nx workspace with React and TypeScript"
步骤:
npx create-nx-workspace@latest my-workspace
# 选择:Integrated Monorepo → React → Integrated monorepo (Nx Cloud)
预期结果: 创建的工作区包含:
apps/ 目录libs/ 目录nx.json输入: "Run tests only for projects affected by recent changes"
命令:
nx affected -t test --base=main~1 --head=main
预期结果: 仅执行受两次提交之间更改影响的项目测试,并利用之前运行的缓存结果。
输入: "Create a shared UI library and use it in the app"
步骤:
# 生成库
nx g @nx/react:lib shared-ui
# 在库中生成组件
nx g @nx/react:component button --project=shared-ui
# 在应用中导入(tsconfig 路径已自动配置)
import { Button } from '@my-workspace/shared-ui'
预期结果: 在 libs/shared-ui 处创建了可构建的库,并配置了正确的 TypeScript 路径映射。
输入: "Configure Module Federation for micro-frontends"
步骤:
# 创建宿主应用
nx g @nx/react:host dashboard
# 向宿主添加远程应用
nx g @nx/react:remote product-catalog --host=dashboard
# 启动开发服务器
nx run dashboard:serve
nx run product-catalog:serve
预期结果: 运行两个独立的应用程序,其中 product-catalog 在运行时动态加载到 dashboard 中。
输入: "Why is my app rebuilding when unrelated lib changes?"
诊断:
# 显示项目图
nx graph --focused=my-app
# 检查隐式依赖
nx show project my-app --json | grep implicitDependencies
解决方案: 添加显式依赖配置或在 nx.json 中使用 namedInputs 来排除某些文件触发构建。
nx affected,仅测试/构建已更改的项目type:app|lib, scope:frontend|backend|shared)nx.json 中配置 workspaceLayout 边界来防止循环依赖nx.json 中的默认值namedInputs 以从生产缓存键中排除测试文件tools/ 中,用于项目特定的脚手架~/.nx/cache 可能会变得很大;如果需要,请在 nx.json 中配置 cacheDirectorynx graph 进行可视化有关特定主题的详细指导,请查阅:
| 主题 | 参考文件 |
|---|---|
| 工作区设置,基本命令 | references/basics.md |
| 生成器(应用、库、组件) | references/generators.md |
| React, Next.js, Expo 模式 | references/react.md |
| NestJS 后端模式 | references/nestjs.md |
| TypeScript 包 | references/typescript.md |
| CI/CD (GitHub, CircleCI 等) | references/ci-cd.md |
| 缓存、受影响、高级主题 | references/advanced.md |
每周安装次数
217
代码仓库
GitHub 星标数
173
首次出现
2026年2月20日
安全审计
安装于
codex194
gemini-cli192
github-copilot189
kimi-cli187
cursor187
opencode187
Provides comprehensive guidance for working with Nx monorepos in TypeScript/JavaScript projects. Nx is a smart build system with advanced caching, affected command execution, and powerful generators for React, Next.js, NestJS, and more. This skill covers workspace creation, project generation, task execution, caching strategies, Module Federation, and CI/CD integration.
Use this skill when:
Trigger phrases: "create Nx workspace", "Nx monorepo", "generate Nx app", "Nx affected", "Nx CI/CD", "Module Federation Nx", "Nx Cloud"
Create a new workspace with interactive setup:
npx create-nx-workspace@latest
Follow prompts to select preset (Integrated, Standalone, Package-based) and framework stack.
Initialize Nx in an existing project:
nx@latest init
Create with specific preset (non-interactive):
npx create-nx-workspace@latest my-workspace --preset=react
Generate a React application:
nx g @nx/react:app my-app
Generate a library:
nx g @nx/react:lib my-lib
# TypeScript library
nx g @nx/js:lib my-util
3. Generate a component in lib:
nx g @nx/react:component my-comp --project=my-lib
4. Generate NestJS backend:
nx g @nx/nest:app my-api
Run tasks for affected projects only:
nx affected -t lint test build
Run tasks across all projects:
nx run-many -t build
# Test specific projects
nx run-many -t test -p=my-app,my-lib
# Test by pattern
nx run-many -t test --projects=*-app
3. Run specific target on single project:
nx run my-app:build
4. Visualize dependency graph:
nx graph
Each project has a project.json defining targets, executor, and configurations:
{
"name": "my-app",
"projectType": "application",
"sourceRoot": "apps/my-app/src",
"targets": {
"build": {
"executor": "@nx/react:webpack",
"outputs": ["{workspaceRoot}/dist/apps/my-app"],
"configurations": {
"production": {
"optimization": true
}
}
},
"test": {
"executor": "@nx/vite:test"
}
},
"tags": ["type:app", "scope:frontend"]
}
Set up project dependencies:
{ "targets": { "build": { "dependsOn": [ { "projects": ["shared-ui"], "target": "build" } ] } } }
Use tags for organization:
{ "tags": ["type:ui", "scope:frontend", "platform:web"] }
Generate a remote (micro-frontend):
nx g @nx/react:remote checkout --host=dashboard
Generate a host:
nx g @nx/react:host dashboard
Use affected commands in CI to only build/test changed projects:
# .github/workflows/ci.yml
- run: npx nx affected -t lint --parallel
- run: npx nx affected -t test --parallel
- run: npx nx affected -t build --parallel
Input: "Create a new Nx workspace with React and TypeScript"
Steps:
npx create-nx-workspace@latest my-workspace
# Select: Integrated Monorepo → React → Integrated monorepo (Nx Cloud)
Expected Result: Workspace created with:
apps/ directory with React applibs/ directory for shared librariesnx.json with cache configurationInput: "Run tests only for projects affected by recent changes"
Command:
nx affected -t test --base=main~1 --head=main
Expected Result: Only tests for projects affected by changes between commits are executed, leveraging cached results from previous runs.
Input: "Create a shared UI library and use it in the app"
Steps:
# Generate library
nx g @nx/react:lib shared-ui
# Generate component in library
nx g @nx/react:component button --project=shared-ui
# Import in app (tsconfig paths auto-configured)
import { Button } from '@my-workspace/shared-ui'
Expected Result: Buildable library at libs/shared-ui with proper TypeScript path mapping configured.
Input: "Configure Module Federation for micro-frontends"
Steps:
# Create host app
nx g @nx/react:host dashboard
# Add remote to host
nx g @nx/react:remote product-catalog --host=dashboard
# Start dev servers
nx run dashboard:serve
nx run product-catalog:serve
Expected Result: Two separate applications running where product-catalog loads dynamically into dashboard at runtime.
Input: "Why is my app rebuilding when unrelated lib changes?"
Diagnosis:
# Show project graph
nx graph --focused=my-app
# Check implicit dependencies
nx show project my-app --json | grep implicitDependencies
Solution: Add explicit dependency configuration or use namedInputs in nx.json to exclude certain files from triggering builds.
nx affected in CI to only test/build changed projectstype:app|lib, scope:frontend|backend|shared)workspaceLayout boundaries in nx.jsonnx.json when possiblenamedInputs to exclude test files from production cache keys~/.nx/cache can grow large; configure cacheDirectory in nx.json if needednx graph to visualizeFor detailed guidance on specific topics, consult:
| Topic | Reference File |
|---|---|
| Workspace setup, basic commands | references/basics.md |
| Generators (app, lib, component) | references/generators.md |
| React, Next.js, Expo patterns | references/react.md |
| NestJS backend patterns | references/nestjs.md |
| TypeScript packages | references/typescript.md |
| CI/CD (GitHub, CircleCI, etc.) | references/ci-cd.md |
| Caching, affected, advanced |
Weekly Installs
217
Repository
GitHub Stars
173
First Seen
Feb 20, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex194
gemini-cli192
github-copilot189
kimi-cli187
cursor187
opencode187
Azure Data Explorer (Kusto) 查询技能:KQL数据分析、日志遥测与时间序列处理
119,800 周安装
PocketBase 最佳实践指南:42条关键规则,涵盖集合设计、API安全与性能优化
206 周安装
Python模块化代码组织指南:文件大小、分割方法与最佳实践
206 周安装
房地产专家系统:MLS集成、虚拟看房、AI估值与物业管理技术解决方案
206 周安装
TypeScript/JavaScript 开发技能 - 掌握 Metabase 开源项目开发流程与工具
206 周安装
Upstash Redis SDK 完整指南 - Redis-JS 安装、使用与性能优化教程
206 周安装
Tavily API 网络搜索技能 - 实现网页爬取、内容提取和智能研究功能
206 周安装
tools/ for project-specific scaffolding| references/advanced.md |