站長(zhǎng)資訊網(wǎng)正所謂：工欲善其事，必先利其器！寫一個(gè)開源的項(xiàng)目也不例外，就拿在國(guó)內(nèi)很火的 vue3 框架 和 vite 工具 來講，其中的實(shí)現(xiàn)與架構(gòu)設(shè)計(jì)無(wú)不是一個(gè) 復(fù)雜而龐大的工程，而支撐這些工程能順利運(yùn)行的無(wú)不是一個(gè)又一個(gè)的輪子，正好最近有在閱讀 vue3 和 vite3 的源碼，發(fā)現(xiàn)一些較實(shí)用的輪子，在這里分享給大家。
如果你想對(duì) 前端工程化 有所涉獵的話，我相信下面的工具總有一款是你想要的！
1. picocolors
picocolors 是一個(gè)可以在終端修改輸出字符樣式的 npm 包，說直白點(diǎn)就是給字符添加顏色；
可能有的同學(xué)想到了，這不是跟 chalk 一樣的嗎？
沒錯(cuò)，他們的作用其實(shí)就是一樣的！
為什么選擇 picocolors：
- 無(wú)依賴包；
- 比 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 所使用的交互式工具不盡相同；
| 工具名 | 何處使用 | 大小 | 周下載量 | github 地址 |
|---|---|---|---|---|
| prompts | vite | 187 kB | 18,185,030 | prompts |
| enquirer | vue3 | 197 kB | 13,292,137 | enquirer |
| inquirer | 其它 | 87.7 kB | 24,793,335 | inquirer |
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.helpcli.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 命令 無(wú)法同時(shí)運(yùn)行多個(gè)腳本的問題，它可以把諸如 npm run clean && npm run build:css && npm run build:js && npm run build:html 的一長(zhǎng)串的命令通過 glob 語(yǔ)法簡(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)單的介紹了下，想要了解
