ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

vue-vben-admin 中的 turbo-run:交互式选择包的 monorepo 命令运行器

vue-vben-admin 中的 turbo-run:交互式选择包的 monorepo 命令运行器 vue-vben-admin 中的 turbo-run交互式选择包的 monorepo 命令运行器【免费下载链接】vue-vben-adminA modern vue admin panel built with Vue3, Shadcn UI, Vite, TypeScript, and Monorepo. Its fast!项目地址: https://gitcode.com/GitHub_Trending/vu/vue-vben-adminturbo-run是 vue-vben-admin 仓库一个基于 Vue3、Shadcn UI、Vite、TypeScript 的 Monorepo 管理后台中内置的命令行小工具它解决了在 monorepo 的多个应用包中并行运行同一命令的选择难题自动探测哪些包定义了目标脚本弹出交互式列表让你点选再以pnpm --filter精准投递到指定包执行。读完本文你将掌握turbo-run的安装、用法、源码调用链并能在自己的 monorepo 项目中复刻这一套探测—选择—执行的 CLI 交互方案。turbo-run 是什么在vue-vben-admin这样一个拥有多个可运行应用的 monorepo 仓库里dev、preview这类脚本往往同时存在于多个包的package.json中。直接用pnpm dev或pnpm run dev无法确定该在哪一个包执行而手写pnpm --filter vben/web-antd run dev又需要先记住包名、再逐字敲击容易出错。turbo-run全名vben/turbo-run正是为此设计的命令行工具它允许你在多个包中并行运行命令并通过交互式界面选择要运行命令的包。按照官方 README 的描述其核心特性包括 交互式选择要运行的包 支持 monorepo 项目结构 自动检测可用的命令 精确过滤目标包在 vue-vben-admin 根目录的 package.json 中它已经被真实接入日常开发流程{ scripts: { dev: turbo-run dev, preview: turbo-run preview } }也就是说开发者只需在仓库根目录执行pnpm dev即可进入 turbo-run 的交互流程从多个候选应用中选择一个来启动pnpm preview则用于选择要本地预览构建产物的应用。安装与前置条件安装命令在 monorepo 根目录通过 pnpm 安装pnpm add -D vben/turbo-run在 vue-vben-admin 中它是作为 workspace 内部包接入的根 package.json 声明了vben/turbo-run: workspace:*源码位于 scripts/turbo-run 目录。该包自身版本为5.8.0声明为private: true且以MIT协议开源见 scripts/turbo-run/package.json。前置条件根据原文档的注意事项小节使用前需要确认以下三点项目使用 pnpm 作为包管理器——turbo-run 最终通过pnpm --filter执行命令因此这是硬性前提目标包必须在package.json中定义了相应的脚本命令——只有包含目标脚本的包才会出现在选择列表中必须在 monorepo 项目的根目录下运行——工具的自动探测依赖从当前目录向上回溯找到仓库根详见下文源码原理。vue-vben-admin 本身即满足这些条件根 package.json 锁定packageManager: pnpm11.16.0并通过preinstall脚本npx only-allow pnpm强制使用 pnpm。使用方法基本语法turbo-run [script]其中[script]是希望执行的目标脚本名。例如运行dev命令turbo-run dev工具会自动检测哪些包有dev命令并提供一个交互式界面让你选择要运行的包。整个交互流程为检测哪些包有dev命令显示一个交互式选择界面让你选择要运行命令的包使用pnpm --filter在选定的包中运行命令。在 vue-vben-admin 中的实际效果以turbo-run dev为例。仓库中apps目录下存在多个可运行应用包名见各应用 package.jsonvben/web-antd、vben/web-antdv-next、vben/web-ele、vben/web-naive、vben/web-tdesign此外还有vben/docs文档站、vben/playground演示沙盒以及vben/backend-mockNitro 后端 Mock。其中定义了dev脚本的包都会被枚举出来终端会显示类似如下的选择提示? Select the app you need to run [dev]: vben/web-antd vben/web-antdv-next vben/web-ele ❯ vben/web-naive vben/web-tdesign选中后即等价于手动执行pnpm --filter vben/web-naive run dev这样就把记住包名 拼接 filter 参数的机械劳动变成了一次回车选择。源码原理探测 → 选择 → 执行turbo-run 的完整实现只有两个源文件非常适合作为学习CLI 交互工具的入门范本入口 src/index.ts 负责命令行解析核心逻辑 src/run.ts 负责探测与执行。入口cac 命令行解析src/index.ts 使用cac定义命令import { consola } from vben/node-utils; import { cac } from cac; import { run } from ./run; try { const turboRun cac(turbo-run); turboRun .command([script]) .usage(Run turbo interactively.) .action(async (command: string) { run({ command }); }); turboRun.usage(turbo-run); turboRun.help(); turboRun.parse(); } catch (error) { consola.error(error); process.exit(1); }要点[script]是可选参数方括号包裹错误统一交给consola输出并以退出码 1 结束。核心run() 的三段式流程src/run.ts 中的run(options)接收{ command }按校验参数 → 探测包 → 选择并执行的顺序工作。第一步校验命令参数L10-L14const { command } options; if (!command) { console.error(Please enter the command to run); process.exit(1); }未传入脚本名时直接报错退出。第二步自动探测有哪些包定义了该脚本L15-L24const { packages } await getPackages(); // 只显示有对应命令的包 const selectPkgs packages.filter((pkg) { return (pkg?.packageJson as Recordstring, any)?.scripts?.[command]; });getPackages来自 workspace 内部包vben/node-utils其实现见 internal/node-utils/src/monorepo.ts先从当前工作目录出发向上查找pnpm-lock.yaml定位 monorepo 根findMonorepoRoot再委托manypkg/get-packages收集全仓所有包及其packageJson。这解释了必须在根目录下运行的原因——工具的探测基准就是仓库根。随后按packageJson.scripts[command]精确过滤只有定义了该脚本的包才会进入候选列表。值得一提的是源码中曾预留过更细粒度的findApps过滤逻辑限定apps目录且存在vite.config.mts的包目前已被注释可以推断作者在迭代中简化为了凡是有该脚本的包都可选。第三步交互选择与执行L26-L55let selectPkg: string | symbol; if (selectPkgs.length 1) { selectPkg await selectstring({ message: Select the app you need to run [${command}]:, options: selectPkgs.map((item) ({ label: item?.packageJson.name, value: item?.packageJson.name, })), }); if (isCancel(selectPkg) || !selectPkg) { cancel( Has cancelled); process.exit(0); } } else { selectPkg selectPkgs[0]?.packageJson?.name ?? ; } if (!selectPkg) { console.error(No app found); process.exit(1); } try { await execa(pnpm, [--filter${selectPkg}, run, command], { stdio: inherit, }); } catch (error: any) { process.exit(error.exitCode || 1); }这里有两个值得注意的分支行为候选包多于 1 个使用clack/prompts的select弹出交互列表用户按CtrlC取消时通过isCancel检测并调用cancel优雅退出退出码 0。候选包只有 1 个甚至 0 个跳过交互直接取唯一包执行取不到则报No app found退出。这意味着如果仓库中只有一个包定义了devturbo-run dev的行为与直接执行等价不会多此一举地弹窗。最终执行调用的是execa(pnpm, [--filter包名, run, command], { stdio: inherit })——execa由vben/node-utils重新导出见 internal/node-utils/src/index.ts。--filter包名是 pnpm 的过滤器语法stdio: inherit保证子进程的输入输出直接透传到当前终端开发服务器如 Vite的热更新输出可以原样呈现。子进程异常退出时以子进程的exitCode兜底为 1作为自身退出码。工程化细节bin 入口与构建turbo-run 通过tsdown构建为 ESM 产物配置见 scripts/turbo-run/tsdown.config.tsimport { defineConfig } from tsdown; export default defineConfig({ clean: true, dts: true, entry: [src/index.ts], format: [esm], outExtensions: () ({ dts: .d.ts, }), });format: [esm]输出 ESM 格式并附带类型声明与根 package.json 的type: module保持一致。CLI 命令的注册点在 scripts/turbo-run/package.jsonbin: { turbo-run: ./bin/turbo-run.mjs }bin字段把turbo-run命令映射到./bin/turbo-run.mjs该入口文件在源码构建后生成运行时由 dist 产物驱动配合files: [dist]只发布构建目录。依赖方面它引用了clack/prompts交互提示、vben/node-utilsworkspace 内部工具与cac命令行解析版本统一由根 pnpm-workspace.yaml 的catalog字段托管例如clack/prompts: ^1.7.0、cac: ^7.0.0。在 monorepo 中postinstall脚本pnpm -r run --if-present stub会在依赖安装后自动执行各 workspace 包的 stub 构建确保turbo-run的 bin 入口在安装阶段即可用。常见问题与排查思路结合原文档注意事项和源码行为可以梳理出以下常见问题的排查方向现象可能原因排查/解决提示Please enter the command to run未传入脚本名参数正确写法turbo-run dev提示No app found仓库中没有包定义该脚本或未在 monorepo 根目录运行确认目标包的package.json中scripts包含该命令回到根目录执行选择列表为空/候选过少脚本名拼写不一致检查各包scripts键名是否完全一致如dev与dev:antd是不同脚本选中后命令立即失败目标包脚本本身报错直接执行pnpm --filter 包名 run script复现错误码会原样透传找不到turbo-run命令包未安装或 bin 未链接在根目录执行pnpm install确认vben/turbo-run出现在根 package.json 的 devDependencies值得强调的是vue-vben-admin 中针对单一应用的启动还提供了绕过交互的快捷方式见根 package.json例如pnpm dev:antd等价于pnpm -F vben/web-antd run dev。当你明确知道要跑哪个应用时可以用这些固定脚本而turbo-run的价值在于不确定或经常切换目标时的交互式体验。总结turbo-run 用不到百行源码把 monorepo 下多包同脚本的启动痛点化解为一次键盘选择以manypkg/get-packages探测包、以clack/prompts呈现选择、以execa执行pnpm --filter三层各司其职src/run.ts。对于 vue-vben-admin 的开发者它意味着pnpm dev不再需要先回忆包名对于任何 pnpm monorepo 项目它都是一份可以照搬的交互式命令运行器参考实现。若需在自己项目中复刻只需满足三个前提使用 pnpm、包内脚本就绪、在仓库根目录运行。【免费下载链接】vue-vben-adminA modern vue admin panel built with Vue3, Shadcn UI, Vite, TypeScript, and Monorepo. Its fast!项目地址: https://gitcode.com/GitHub_Trending/vu/vue-vben-admin创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表