正所謂：工欲善其事，必先利其器！寫一個(gè)開源的項(xiàng)目也不例外，就拿在國(guó)內(nèi)很火的 vue3 框架 和 vite 工具 來講，其中的實(shí)現(xiàn)與架構(gòu)設(shè)計(jì)無不是一個(gè) 復(fù)雜而龐大的工程，而支撐這些工程能順利運(yùn)行的無不是一個(gè)又一個(gè)的輪子，正好最近有在閱讀 vue3 和 vite3 的源碼，發(fā)現(xiàn)一些較實(shí)用的輪子，在這里分享給大家。

如果你想對(duì) 前端工程化 有所涉獵的話，我相信下面的工具總有一款是你想要的！

1. picocolors

picocolors 是一個(gè)可以在終端修改輸出字符樣式的 npm 包，說直白點(diǎn)就是給字符添加顏色；

可能有的同學(xué)想到了，這不是跟 chalk 一樣的嗎？

沒錯(cuò)，他們的作用其實(shí)就是一樣的！

為什么選擇 picocolors：

• 無依賴包；
• 比 chalk 體積小 14 倍，速度快 2 倍；
• 支持 CJS 和 ESM 項(xiàng)目；

所以大家明白選什么了吧！

當(dāng)然因?yàn)?picocolors 包比較小，所以功能邊界沒有 chalk 的全面，但是用在一些自研等絕大部分的需求中是完全可以滿足的。

注意：

• 因?yàn)闅v史等原因 vue3 目前還在使用 chalk；

• vite 已全面用 picocolors 替代作為終端樣式輸出；

• 不過 chalk 為了優(yōu)化，在最近的最新版本 v5 中已剔除依賴包；

2. prompts vs enquirer vs inquirer

乍一看，可能有的同學(xué)會(huì)有點(diǎn)懵，其實(shí)一句話交代就是：其實(shí)他們?nèi)际怯脕?實(shí)現(xiàn)命令行交互式界面 的工具；

之所以放在一起是因?yàn)?vue3 和 vite 所使用的交互式工具不盡相同；

npm 近兩年下載熱度趨勢(shì)：

簡(jiǎn)單總結(jié)：

• 其實(shí) vite 起初也是使用的 enquirer，只是后面為了滿足用戶跨平臺(tái)使用時(shí)出現(xiàn)的 bug，才替換成了 prompts，當(dāng)然也并不是說 enquirer 不好，只是場(chǎng)景不同，所以選擇會(huì)有所不同罷了；

• 其實(shí)如果你想在自己的項(xiàng)目中使用 交互式界面 工具，我這邊還是比較推薦 inquirer 的，畢竟社區(qū)受歡迎程度和功能都是完全滿足你的需求的。

3. cac

cac 是一個(gè)用于構(gòu)建 CLI 應(yīng)用程序的 JavaScript 庫(kù)；

通俗點(diǎn)講，就是給你的 cli 工具增加自定義一些命令，例如 vite create，后面的 create 命令就是通過 cac 來增加的；

因?yàn)樵搸?kù)較適用于一些自定義的工具庫(kù)中，所以只在 vite 中使用， vue3 并不需要該工具；

為什么不用 commander or yargs ？

主要是因?yàn)?vite 的工具是針對(duì)一些自定義的命令等場(chǎng)景不是特別復(fù)雜的情況；

我們看看 cac 的優(yōu)勢(shì)：

• 超輕量級(jí)：沒有依賴，體積數(shù)倍小于 commander 和 yargs；
• 易于學(xué)習(xí)：只需要學(xué)習(xí) 4 API cli.option、cli.version 、cli.help cli.parse 即可搞定大部分需求；
• 功能強(qiáng)大：?jiǎn)⒂媚J(rèn)命令，可以像使用 git 的命令一樣方便去使用它，且有參數(shù)和選項(xiàng)的校驗(yàn)、自動(dòng)生成 help 等完善功能；

當(dāng)然，如果你想寫一個(gè)功能較多的 cli 工具，也是可以選擇 commander 和 yargs 的；

不過一些中小型的 cli 工具我還是比較推薦 cac 的；

4. npm-run-all

npm-run-all 是一個(gè) cli 工具，可以并行、或者按順序執(zhí)行多個(gè) npm 腳本；npm-run-all 在 vite 工具源碼中有使用；

通俗點(diǎn)講就是為了解決官方的 npm run 命令 無法同時(shí)運(yùn)行多個(gè)腳本的問題，它可以把諸如 npm run clean && npm run build:css && npm run build:js && npm run build:html 的一長(zhǎng)串的命令通過 glob 語法簡(jiǎn)化成 npm-run-all clean build:* 一行命令。

提供三個(gè)命令：

• npm-run-all：
  • 可以帶 -s 和 -p 參數(shù)的簡(jiǎn)寫，分別對(duì)應(yīng)串行和并行；

  # 依次執(zhí)行這三個(gè)任務(wù)命令 npm-run-all clean lint build  # 同時(shí)執(zhí)行這兩個(gè)任務(wù)命令 npm-run-all --parallel lint build  # 先串行執(zhí)行 a 和 b, 再并行執(zhí)行 c 和 d npm-run-all -s a b -p c d

• run-s：為 npm-run-all --serial的縮寫；
• run-p：為 npm-run-all --parallel的縮寫；

上面只是簡(jiǎn)單的介紹了下，想要了解