初步认识NX

酷酷的大侠
2,334 阅读4分钟

**monorepo(单仓)一种将多个项目代码存储在一个仓库里的软件开发策略**

NX是什么

Nx 是一个功能强大的开源构建系统，提供用于提高开发人员生产力、优化 CI 性能和维护代码质量的工具和技术，我们可以利用NX来管理monorepo

Nx特点

  • 高效运行任务：Nx可以并行运行任务，并根据任务的依赖对任务进行排序
  • 本地和远程缓存：Nx可以缓存任务运行结果，防止重复的任务重新运行，增加开发效率
  • 自动依赖更新：利用Nx插件可以完成自动升级代码库和依赖项等各种功能
  • 定制化：Nx具有高度可定制性和可扩展性

安装NX

全新的可以使用下面命令,然后根据引导选择适合自己的配置

yarn global add nx
npx create-nx-workspace

已经存在的项目，可以使用下面的命令或者在项目目录下安装nx的npm包并创建nx.json配置文件

npx nx@latest init

NX是如何工作的？

image.png

可以从图中看出有5大部分组成

  1. Nx 提供一些基本功能，如任务运行、分发、工作区分析、缓存、代码生成和自动代码迁移
  2. Pulgins 插件是构建在 Nx 包提供的基本功能之上的NPM包，比如代码生成器，执行器和代码迁移。 @nx/react 添加了对构建 React 应用程序和库的支持，@nx/cypress 添加了 Cypress 的 e2e 测试功能
  3. Devkit 构建Nx插件的应用程序
  4. Nx Cloud 提供远程储存，分布式任务执行，可搜索的结构化日志
  5. Nx Console 是VSCode、IntelliJ和VIM的扩展程序

基本使用NX管理monorepo

官网地址：nx.dev/getting-sta…

step1: 使用下面命令创建一个新的工作区

npx create-nx-workspace@latest package-based --preset=npm

step2: 在根目录package-based创建package托管仓库并创建第一个项目is-even

image.png

step3: 执行nx build构建，这里显示匹配缓存，是因为我已经build过一次了。可以发现nx缓存了任务结果

npx nx build is-even

image.png

step4: 我们从is-even项目复制味is-odd项目，并且在is-odd项目引入is-even。因为在根目录package.json里设置了workspaces。故我们可以在is-odd的package.json直接引入is-even

step5 同时执行多个任务，任务的执行依赖

执行依赖，nx.json里设置targetDefaults对应命令的属性 "dependsOn": ["^build"]

多个任务并行执行：npx nx run-many -t build

从上面的使用来说，我们可以初步认识Nx如何管理多个仓库的，支持缓存任务结果，并且可以定义任务依赖性

集成储存库入门

项目级project.json 可以用来管理项目运行目标的元数据

 { 
   "name": "is-even", 
   "targets": { 
   "build": { /* ... */ }, 
   "publish": { /* ... */ },      
   "lint": { /* ... */ }, 
   "test": { /* ... */ } } 
 }

如何统一管理本地包的链接? ？？ ====> 根目录tsconfig.base.json定义path字段

// tsconfig.base.json
"paths": { 
   "@myorg/is-even": ["packages/is-even/src/index.ts"], 
   "@myorg/is-odd": ["packages/is-odd/src/index.ts"] 
}
// is-odd/index.ts 项目引用 
import { isEven } from '@myorg/is-even';

使用NX独立构建react应用

  1. 创建react应用程序 npx create-nx-workspace@latest myreactapp --preset=react-standalone 上述命令生成以下结构
  1. 启动程序，最常见的任务已经映射到package.json文件了 npm start 或者 nx serve启动程序

Nx使用以下语法来执行命令，所有目标，例如服务、构建、测试或您的自定义目标，都在project.json 文件中定义。 image.png

  1. 执行多个任务, 根据project.json配置的target我们可以使用下面命令执行多个任务 nx run-many -t test lint e2e

【问题】为什么我们不直接在package.json里直接启动脚本，而是在project.json里去配置任务？

虽然两者都有类似的用途，但project.json文件可以被视为package.json脚本的高级形式，提供额外的元数据和功能，比如Nx插件是可选包，可扩展Nx的功能，以满足各种特定技术的需求

  1. 创建新组件

  2. 使用本地模块化你的react应用

    Nx 允许您将此逻辑分离到“本地库”中。 主要好处包括

    • 更好地分离关注点
    • 更好的可重用性
    • 您的“域区域”之间更明确的“API”
    • 通过为每个库启用独立的测试/lint/构建命令，提高 CI 的可扩展性
    • 通过允许不同的团队在不同的库上工作，提高团队的可扩展性
avatar
文章
阅读
粉丝