前端 Nx Workspace：可扩展应用的技术栈开发

在当今快节奏的软件开发环境中，构建和维护大型前端应用程序可能充满挑战。随着项目规模的增长，管理依赖、确保代码一致性以及优化构建时间变得越来越复杂。技术栈提供了一种强大的解决方案，它将多个项目和库整合到一个存储库中。Nx，一个智能、可扩展的构建系统，通过先进的工具和功能增强了技术栈开发。

本综合指南将探讨使用 Nx Workspace 进行前端技术栈开发的优势，涵盖关键概念、实际示例和最佳实践。

什么是技术栈？

技术栈是一种软件开发策略，其中所有项目及其依赖项都存储在单个存储库中。这种方法与传统的多个存储库方法（其中每个项目都有自己的存储库）形成对比。

技术栈的关键特征：

• 单一事实来源：所有代码都集中在一处。
• 代码共享和重用：更容易跨项目共享和重用代码。
• 简化的依赖管理：跨项目管理依赖项变得更加直接。
• 原子性更改：更改可以跨越多个项目，确保一致性。
• 改进的协作：团队更容易协作处理相关项目。

为什么前端开发要使用技术栈？

技术栈为前端开发提供了显著的优势，尤其适用于大型和复杂的项目。

• 增强的代码共享：前端项目通常共享通用的 UI 组件、实用函数和设计系统。技术栈促进代码共享，减少重复并提高一致性。例如，设计系统库可以轻松地在同一工作区内的多个 React 应用程序之间共享。
• 简化的依赖管理：管理多个前端项目的依赖项可能具有挑战性，尤其是在不断发展的 JavaScript 生态系统中。技术栈通过集中依赖项并提供管理版本和升级的工具来简化依赖项管理。
• 改进的构建性能：Nx 提供先进的构建缓存和依赖项分析，从而实现更快、更高效的构建。通过分析依赖项图，Nx 仅重新构建受更改影响的项目，从而显着减少构建时间。这对于拥有大量组件和模块的大型前端应用程序至关重要。
• 简化的重构：在技术栈中跨多个项目重构代码更加容易。更改可以原子化进行，确保一致性并降低引入错误的风险。例如，在单个提交中就可以重命名多个应用程序中使用的组件。
• 更好的协作：技术栈通过提供共享代码库和通用开发环境，促进前端开发人员之间的更好协作。团队可以轻松地为不同项目做出贡献，并共享知识和最佳实践。

介绍 Nx：智能、可扩展的构建系统

Nx 是一个强大的构建系统，它通过先进的工具和功能增强技术栈开发。它提供标准化的开发体验，提高构建性能，并简化依赖管理。

Nx 的主要功能：

• 智能构建系统：Nx 分析项目的依赖项图，仅重新构建受影响的项目，从而显着缩短构建时间。
• 代码生成：Nx 提供代码生成工具，用于创建新项目、组件和模块，从而加速开发并确保一致性。
• 集成工具：Nx 与流行的前端框架（如 React、Angular 和 Vue.js）集成，提供无缝的开发体验。
• 插件生态系统：Nx 拥有丰富的插件生态系统，可通过其他工具和集成扩展其功能。
• 增量构建：Nx 的增量构建系统仅重新构建已更改的部分，从而大大加快开发反馈循环。
• 计算缓存：Nx 缓存昂贵计算的结果，例如构建和测试，从而进一步提高性能。
• 分布式任务执行：对于非常大的技术栈，Nx 可以将任务分发到多台机器上，以并行化构建和测试。

为前端开发设置 Nx Workspace

设置 Nx Workspace 非常简单。您可以使用 Nx CLI 创建一个新工作区并添加项目和库。

先决条件：

• Node.js（16 或更高版本）
• npm 或 yarn

步骤：

1. 安装 Nx CLI：

               npm install -g create-nx-workspace
               
   
                 
                   Copy
                 
               
             

2. 创建新的 Nx Workspace：

               npx create-nx-workspace my-frontend-workspace
               
   
                 
                   Copy
                 
               
             

   系统会提示您选择一个预设。选择与您偏好的前端框架（例如 React、Angular、Vue.js）匹配的预设。

3. 添加新应用程序：

               nx generate @nx/react:application my-app
               
   
                 
                   Copy
                 
               
             

   此命令将在工作区中创建一个名为“my-app”的新 React 应用程序。

4. 添加新库：

               nx generate @nx/react:library my-library
               
   
                 
                   Copy
                 
               
             

   此命令将在工作区中创建一个名为“my-library”的新 React 库。库用于在应用程序之间共享代码。

组织您的 Nx Workspace

结构良好的 Nx Workspace 对于可维护性和可扩展性至关重要。在构建工作区的结构时，请考虑以下准则：

• 应用程序：应用程序是您前端项目的入口点。它们代表面向用户的界面。示例包括 Web 应用程序、移动应用程序或桌面应用程序。
• 库：库包含可在多个应用程序之间共享的可重用代码。它们根据其功能分为不同类型。
• 功能库：功能库包含特定功能的业务逻辑和 UI 组件。它们依赖于核心库和 UI 库。
• UI 库：UI 库包含可在多个功能和应用程序中使用的可重用 UI 组件。
• 核心库：核心库包含实用函数、数据模型和其他工作区中使用的通用代码。
• 共享库：共享库包含框架无关的代码，可以由多个应用程序和库使用，无论前端框架（React、Angular、Vue.js）如何。这有助于代码重用并减少重复。

示例目录结构：

my-frontend-workspace/
├── apps/
│   ├── my-app/
│   │   ├── src/
│   │   │   ├── app/
│   │   │   │   ├── app.tsx
│   │   │   │   └── app.module.css
│   │   │   └── main.tsx
│   │   └── project.json
│   └── my-other-app/
│       └── ...
├── libs/
│   ├── feature-my-feature/
│   │   ├── src/
│   │   │   └── lib/
│   │   │       └── feature-my-feature.tsx
│   │   └── project.json
│   ├── ui/
│   │   ├── src/
│   │   │   └── lib/
│   │   │       └── button/
│   │   │           └── button.tsx
│   │   └── project.json
│   ├── core/
│   │   ├── src/
│   │   │   └── lib/
│   │   │       └── api.ts
│   │   └── project.json
│   └── shared/
│       ├── src/
│       │   └── lib/
│       │       └── date-formatter.ts
│       └── project.json
├── tools/
│   └── generators/
├── nx.json
├── package.json
└── tsconfig.base.json

通过 Nx 库进行代码共享和重用

Nx 库是技术栈中代码共享和重用的关键。通过将代码组织成定义明确的库，您可以轻松地在多个应用程序之间共享组件、服务和实用程序。

示例：共享 UI 组件

假设您有一个按钮组件，您想在多个 React 应用程序之间共享。您可以创建一个名为“ui”的 UI 库，并将按钮组件放置在该库中。

1. 创建 UI 库：

               nx generate @nx/react:library ui
               
   
                 
                   Copy
                 
               
             

2. 创建按钮组件：

               nx generate @nx/react:component button --project=ui
               
   
                 
                   Copy
                 
               
             

3. 实现按钮组件：

               // libs/ui/src/lib/button/button.tsx
   import styles from './button.module.css';
   
   interface ButtonProps {
    text: string;
    onClick: () => void;
   }
   
   export function Button({ text, onClick }: ButtonProps) {
    return (
    
    {text}
    
    );
   }
   
   export default Button;
               
   
                 
                   Copy
                 
               
             

4. 从库中导出按钮组件：

               // libs/ui/src/index.ts
   export * from './lib/button/button';
               
   
                 
                   Copy
                 
               
             

5. 在应用程序中使用按钮组件：

               // apps/my-app/src/app/app.tsx
   import { Button } from '@my-frontend-workspace/ui';
   
   function App() {
    return (
    
   
    
   Welcome to My App
     alert('Clicked!')} />
    
    );
   }
   
   export default App;
               
   
                 
                   Copy
                 
               
             

通过使用库，您可以确保您的 UI 组件在所有应用程序中保持一致。当您更新 UI 库中的按钮组件时，使用该组件的所有应用程序都将自动更新。

Nx Workspaces 中的依赖管理

Nx 提供了强大的工具来管理项目和库之间的依赖关系。您可以在每个项目或库的 `project.json` 文件中明确定义依赖项。

示例：声明依赖项

假设您的应用程序“my-app”依赖于库“core”。您可以在“my-app”的 `project.json` 文件中声明此依赖项。

            // apps/my-app/project.json
{
 "name": "my-app",
 "projectType": "application",
 ...
 "implicitDependencies": ["core"]
}

            

              
                Copy
              
            
          

通过显式声明依赖项，Nx 可以分析您工作区的依赖项图，并在依赖项更改时仅重新构建受影响的项目。这大大提高了构建性能。

使用 Nx 进行构建性能优化

Nx 的智能构建系统和计算缓存功能显著提高了构建性能。以下是在 Nx Workspace 中优化构建性能的一些技巧：

• 分析依赖项图：使用 `nx graph` 命令可视化您工作区的依赖项图。识别潜在的瓶颈并优化您的项目结构以减少依赖项。
• 使用计算缓存：Nx 缓存昂贵计算的结果，例如构建和测试。确保在您的 `nx.json` 文件中启用了计算缓存。
• 并行运行任务：Nx 可以并行运行任务以利用多个 CPU 核心。使用 `--parallel` 标志并行运行任务。
• 使用分布式任务执行：对于非常大的技术栈，Nx 可以将任务分发到多台机器上，以并行化构建和测试。
• 优化您的代码：优化您的代码以缩短构建时间。删除未使用的代码，优化图像，并使用代码拆分来减小捆绑包的大小。

Nx Workspaces 中的测试

Nx 提供了集成的测试工具，用于运行单元测试、集成测试和端到端测试。您可以使用 `nx test` 命令来运行工作区中所有项目的测试或特定项目的测试。

示例：运行测试

            nx test my-app
            

              
                Copy
              
            
          

此命令运行应用程序“my-app”的所有测试。

Nx 支持 Jest、Cypress 和 Playwright 等流行的测试框架。您可以在每个项目的 `project.json` 文件中配置您的测试环境。

使用 Nx 进行持续集成和持续部署 (CI/CD)

Nx 与 GitHub Actions、GitLab CI 和 Jenkins 等流行的 CI/CD 系统无缝集成。您可以使用 Nx 的命令行界面在 CI/CD 流水线中自动化构建、测试和部署。

示例：GitHub Actions 工作流

这是一个 GitHub Actions 工作流示例，用于构建、测试和部署您的 Nx Workspace：

            # .github/workflows/ci.yml
name: CI

on:
 push:
 branches: [main]
 pull_request:
 branches: [main]

jobs:
 build:
 runs-on: ubuntu-latest

 steps:
 - uses: actions/checkout@v3
 with:
 fetch-depth: 0
 - uses: actions/setup-node@v3
 with:
 node-version: 16
 cache: 'npm'
 - run: npm ci
 - run: npx nx affected --target=lint --base=origin/main --head=HEAD
 - run: npx nx affected --target=test --base=origin/main --head=HEAD --watchAll=false
 - run: npx nx affected --target=build --base=origin/main --head=HEAD
            

              
                Copy
              
            
          

此工作流执行以下任务：

• Linting：对受影响的项目运行 linter。
• 测试：对受影响的项目运行测试。
• 构建：构建受影响的项目。

Nx 提供了 `affected` 命令，允许您仅对受更改影响的项目运行任务。这大大缩短了 CI/CD 流水线的执行时间。

前端 Nx Workspace 开发的最佳实践

以下是使用 Nx 开发前端应用程序的一些最佳实践：

• 遵循一致的编码风格：使用 Prettier 等代码格式化工具和 ESLint 等 linter 来强制执行整个工作区的一致编码风格。
• 编写单元测试：为所有组件、服务和实用程序编写单元测试，以确保代码质量并防止回归。
• 使用设计系统：使用设计系统来确保 UI 组件之间的一致性。
• 记录您的代码：彻底记录您的代码，以便其他开发人员更容易理解和维护。
• 使用版本控制：使用 Git 进行版本控制并遵循一致的分支策略。
• 自动化您的工作流程：通过 CI/CD 自动化您的工作流程，以确保您的代码始终自动进行测试和部署。
• 保持依赖项最新：定期更新您的依赖项，以受益于最新的功能和安全补丁。
• 监控性能：监控应用程序的性能并识别潜在的瓶颈。

高级 Nx 概念

当您熟悉 Nx 的基础知识后，您可以探索一些高级概念来进一步增强您的开发工作流程：

• 自定义生成器：创建自定义生成器以自动化创建新项目、组件和模块。这可以显着缩短开发时间并确保一致性。
• Nx 插件：开发 Nx 插件，通过自定义工具和集成来扩展 Nx 的功能。
• 模块联邦：使用模块联邦分别构建和部署应用程序的独立部分。这使得部署更快，灵活性更高。
• Nx Cloud：与 Nx Cloud 集成，以获得高级构建洞察、分布式任务执行和远程缓存。

结论

Nx Workspace 提供了一种强大而高效的方式来管理前端技术栈。通过利用 Nx 的先进工具和功能，您可以改进代码共享、构建性能和开发人员协作，从而构建可扩展且易于维护的前端应用程序。拥抱 Nx 可以简化您的开发流程，并为您的团队带来显著的生产力提升，尤其是在处理复杂的大型项目时。随着前端领域不断发展，掌握 Nx 的技术栈开发正变得对前端工程师来说是一项越来越有价值的技能。

本指南全面概述了前端 Nx Workspace 开发。通过遵循最佳实践和探索高级概念，您可以释放 Nx 的全部潜力，并构建出色的前端应用程序。