为什么自定义您工作流程的 Nx 工具栏和菜单

开发者在一天里花费了相当大一部分时间执行重复的命令——运行测试、构建项目、生成代码或导航工作空间。强大的单列框架Nx已经提供了极好的CLI和Nx控制台功能,但真正的生产率乘数来自于用户界面适应您的具体任务。自定义工具栏和菜单将您的Nx工作空间从一个通用环境转换成个性化的命令中心。您可以不通过菜单进行搜索或打入长长的CLI字符串,而是用单击触发最常见的动作。这篇文章会引导您通过设计、构建和维护定制的Nx工具栏和菜单的过程,这些工具栏和菜单与您的团队的工作流程保持一致,并提高日常效率。

核心概念:Nx工具栏和菜单是什么?

Nx工作空间通常包括多个应用程序和库,每个库都有自己的一组脚本(构建、服务、林特、测试、e2e等). 工具栏和菜单在这些命令上提供图形层。在视觉工作室代码或WebStorm等IDE中,Nx Console扩展已经添加了带有项目级别动作的侧边栏。然而,您可以通过创建自定义工具栏按钮来进一步运行宏,合并多个命令,甚至触发外部工具。自定义菜单允许您组合相关的命令——例如,捆绑构建+上传+通知步骤的“Deplocation”菜单。理解这些定制是IDE或Nx Console配置中运行的第一步。

定制发生的地方

  • IDE扩展:Nx Console(VS代码,JetBraiins)支持工作空间级配置文件(例如或),可以定义自定义任务.
  • Nx控制台设置: 在扩展内,可以设置“favorites”和自定义命令调色板.
  • 关键绑定和宏:] 高级用户可以使用诸如或IDE宏系统等工具,将Nx命令链起来.
  • 海关脚本:[ 在中定义npm脚本,这些脚本调用Nx命令,然后将其绑在UI元素上.

通过利用这些层,你可以建立一个连贯的工具栏,涵盖从本地开发到CI/CD步骤的一切.

创建自定义 Nx 工具栏的步进指南

1. 准备您的工作空间, 用于自定义

在添加任何 UI 元素之前, 请确保您的工作空间是干净和有组织的 。 运行 [[ FLT: 4]] 以可视化项目依赖性, 并对现有的目标配置进行审查 。 为您的 IDE 安装最新的 Nx 控制台扩展。 对于 VS 代码, 其中包括命令调色板和工程探索器等强大的功能, 它们是自定义添加的基础 。

2. 定义您最频繁的指令

列出您团队每天运行多次的命令。 常见的例子 :

  • (监视模式)
  • (单位测试)
  • ]
  • (依赖可视化)

优先排序最多十个命令。此列表将成为工具栏和菜单条目的基础。

3. 使用 Nx 控制台的内置 " 偏好 "

Nx 控制台扩展允许您将特定工程和目标标为最爱。 右键单击 Nx 控制台侧边栏中的一个项目, 并选择“ 添加到最爱 ” 。 喜欢出现在顶部的单独的一节中, 并给您一个点击的访问权限。 这是工具栏定制的最简单形式, 不需要配置文件。 对于更细的颗粒控制, 您可以在 [[FLT: 11] 或 [[FLT: 12] 中创建自定义任务 。

4. 在工作空间配置中创建自定义任务

定义按顺序或平行运行多个 Nx 命令的自定义任务。 例如, 在应用程序的 ] 中添加以下内容:

"fastserve": {
 "executor": "nx:run-commands",
 "options": {
 "commands": [
 "nx build shared-ui",
 "nx serve frontend"
 ],
 "parallel": false
 }
}

现在, 您的自定义工具栏( 通过 Nx Console 或 CLI) 可以使用 [[FLT: 1 15] 。 您也可以使用任务. json 在 VS 代码中添加菜单项, 但是 Nx Console 的本地方法更干净 。

5. 与任务组一起构建自定义菜单

对于较大的团队, 组合相关的命令会输入一个单一的菜单。 使用 Nx 的 [[FLT: 16] ] , 并有特定的配置。 例如, 创建一个“ 前承诺” 菜单, 运行 Lint, 格式检查和单位测试。 您可以将此显示为 npm 顶级脚本, 然后将其添加为“ 最喜欢的” 或使用自定义任务方式将其固定在 Nx Console 工具栏上 。

6. 试验和体力

设置后, 从您的新工具栏或菜单中运行每个命令。 请检查输出是否正确, 并且不会中断现有工作流程 。 请同事测试新眼睛时经常会发现缺失的步数或混淆的标签 。 调整命令以反映实际使用频率 。

高级自定义技术

使用 IDE 密钥绑定和宏

在工具栏之外, 您可以指定键盘快捷键来定义 Nx 任务。 在 VS 代码中, 打开 [[FLT: 17] ] , 并将键盘快捷键绑定在像 [[FLT: 18] ] 这样的命令上, 并与 Nx CLI 字符串结合。 对于复杂的序列, 使用像“ macros” 这样的扩展键来触发多个动作, 例如, 按 Ctrl+Shift+T 可以运行您的测试套件, 然后在一个新的终端打开测试覆盖报告 。

整合外部工具

您可以在本地开发 URL 中添加打开浏览器的按钮, 运行灯塔审计, 或部署到中转环境。 使用 Nx 的 [[FLT: 19] 执行器或 shell 脚本。 例如, “ 部署到 Stage” 工具栏按钮可以运行 [[FLT: 20] 。 将它包入自定义 npm 脚本并添加为首选 。

团队共享配置

通过存储到工作空间仓库中来创建自定义的工具栏和菜单。 定义自定义任务在 [[FLT: 21] 或共享 [[FLT: 22] ] 中。 记录在 README 或专用 [[FLT: 23] ] 中意图使用的功能。 当新的开发者复制回波时, 其得到相同的工作流程 。

真实世界实例:全速开发工具栏

让我们为一个包含角前端、节点.js后端和共享类型库的单列波设计一个工具栏。工具栏包括:

  • 开始全部 –在单独的终端标签中运行.
  • 快速测试 –运行](最频繁更改的lib).
  • Lint Fix –运行于受影响的项目].
  • 构建和导出[] –将前端和复制的静态文件建为].
  • Dleating – 运行一个自定义的部署脚本,通过rsync检查未承诺的更改,构建,并上传.

每个按钮作为自定义目标创建于各自项目的,然后通过Nx Console最爱的键固定。“部署”按钮包括使用一个带有多个步骤的Nx 执行器的飞行前检查。

可维持自定义的最佳做法

  • Name 明显:使用像“QQ Start All”这样的描述性标签(带有emojis用于快速视觉识别).
  • 有限范围:[] 将工具栏保留在10-12项之下,以避免杂乱. Group second commands into a single menu.
  • 自动文档: 从您的] 生成一个自定义目标,使用脚本。
  • Version Control:[ 总是承诺定制配置,这样每个团队成员都受益.
  • 定时评论:[ 每个月,prune未使用的命令,并添加从日常使用中产生的新命令.

常见的陷阱和如何避免它们

  • 编码路径:] 使用Nx的]和变量来保持配置的可移植性.
  • 超工程: 不要为您每周运行一次的命令添加自定义工具栏。 坚持高频动作 。
  • 打破更改:] 在升级Nx时测试您的自定义目标。使用来验证兼容性。
  • 忽略团队反馈:[ 调查你的团队,以确保工具栏解决真正的疼痛点,而不是想象中的痛点.

衡量生产力收益

执行自定义工具栏和菜单后,跟踪时间节省。 一个简单的衡量标准:在定制之前,运行典型的命令链(例如构建+测试+lint)需要多少秒? 之后,用一击来测量时间。即使每次操作都节省10秒,如果开发者每天运行20个这样的链,那么每天节省3分钟以上,但跨10个团队的复合时间是每周一小时。 更重要的是,CLI命令中上下文切换减少,打字减少,导致流量改善。

供进一步阅读的外部资源

结论

自定义 Nx 工具栏和菜单不仅仅是奢侈品,而是开发团队效率的实际投资。通过仔细选择高频指令,利用 Nx Console 的首选和自定义任务,并与 IDE 宏整合,您可以构建一个最小化摩擦的工作空间。 开始小点: 选择最烦人的日常三个命令, 把它们变成工具栏按钮。 然后根据实际使用模式扩展。 您的未来自我和队友会感谢你的点击率降低, 重点更清晰。 今天开始试验, 注意生产率飞涨。