NX 教程

之前我们有分享过五分钟构建使用任意技术栈构建一个mono repo

在这里是Nx的一些基础知识。帮助你快速掌握它,用起来。

先全局安装一下叭

bash 复制代码
npm add --global nx@latest

[!TIP] 如果要使用Nx的命令,那么必须在Nx的工作空间里 创建一个Nx的工作空间 npx create-nx-workspace@latest <workspace name>

添加Nx到已存在的工作区 npx nx@latest init
[!TIP] 你可以直接用我之前做的模板nx-vue-cosmopolis或者nx-vue-spark去做测试。

Nx是个啥?

你肯定知道Lerna吧。Nx的背后是Nrwl,Nrwl收购了Lerna。 Lerna is dead - Long Live Lerna

Nx是一个任务运行器。 可以缓存(支持本地缓存和云缓存)你运行任务的结果,同时确保这些任务以正确的顺序运行

🚀 这里有些牛逼的特性

  • 🐥 任务管道化 (以合理的顺序运行你所有library的任务)
  • 🐥 自动包的软链接(假设A libray依赖于B libray,此时B更新了内容,无需做任何事 A的内容也会更新哦)
  • 🐥 缓存你的Task结果 (支持本地缓存和云缓存,让你的应用快的起飞)
  • 🐥 可视化库依赖. (Nx会提供一个在线的可交互的图表,让你分析你的包,哪个依赖了哪个。再也不怕库太多分不清关系啦)
  • 🐥 丰富的插件系统(通过插件,我们可以支持everything).
  • 🐥 管理你的发布 (帮助你发包,自动帮你更新包版本,生成changelog)
  • 🐥 任务并行运行(说白了就是很快)
  • 🐥 Storybook 支持

常用的命令

你可以直接在Nx的工作空间跑nx命令。下面的例子是在nx-vue-cosmopolis 仓库下运行

[!TIP] nx 必须在Nx的工作空间下

nx graph

以图表的形式展示工作空间下包之间的依赖关系。

直接运行 nx graph在你的项目里. 然后打开链接。

这里你就很清晰的看见了各个包之间的依赖关系。我们可以得到如下信息。

  1. We can know quickly nx-vue-cosmopolis 依赖 order and products 库。而这两个库同时依赖 shared-ui.
  2. 我们可以知道nx-vue-cosmopolis的类型是 Application 而其他都是 Library. 3.我们可以知道每个应用或者库内部的target (关于target后边会说到)
  3. 我们知道如何去 lint build serve preview serve-static test

nx generate <generator>

使用generator创建修改文件。此处我们以@nx/vue插件为例。

这里有两种方式,你可以看到@nx/vue里面有哪些generator

  1. nx list @nx/vue
  1. official website

从上面的图,我们知道@nx/vue这个插件可以做很多事。

  • 💪 创建一个 vue 应用
  • 💪 创建一个Vue library
  • 💪 创建一个Vu 组件
  • 💪 设置 tailwind 配置
  • 💪 设置 storybook
  • 💪 为你的组件生成 stories

下面我举个例子怎么用它。

bash 复制代码
#1. create a lib named products
nx g @nx/vue:library products --directory=modules/products --unit-test-runner=vitest --bundler=vite

#2. create a component under products lib
nx g @nx/vue:component product-list --directory=modules/products/src/product-list

nx release

协调应用程序和库的版本控制和发布。并生成CHANGELOG.md

首先,你需要通过设置release来定义Nx应该为哪些项目管理release。nx.json中的Projects属性:

json 复制代码
{
    "release": {
    "projects": ["modules/*"]
  },
}

然后运行

bash 复制代码
nx release --first-release --dry-run

🌸 Thanks

希望这些能帮助到大家。如果对你有帮助的话,麻烦给个Star吧⭐️

相关推荐
玩电脑的辣条哥3 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452183 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52353 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
Moon.93 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
垚垚 Securify 前沿站3 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺6 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
mosquito_lover17 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt
柴柴的小记9 小时前
前端vue引入特殊字体不生效
前端·javascript·vue.js
柠檬豆腐脑10 小时前
从前端到全栈:新闻管理系统及多个应用端展示
前端·全栈
bin915310 小时前
DeepSeek 助力 Vue 开发:打造丝滑的颜色选择器(Color Picker)
前端·javascript·vue.js·ecmascript·deepseek