学会这20个库，让你快速看懂 vue3 和 vite3 源码 _vue3

前言大家好，我是小满，正所谓：工欲善其事，必先利其器！
写一个开源的项目也不例外，就拿在国内很火的 vue3 框架和 vite 工具来讲，其中的实现与架构设计无不是一个复杂而庞大的工程，而支撑这些工程能顺利运行的无不是一个又一个的轮子，正好最近有在阅读 vue3 和 vite3 的源码，发现一些较实用的轮子，在这里分享给大家。
如果你想对前端工程化有所涉猎的话，我相信下面的工具总有一款是你想要的！
1. picocolorspicocolors 是一个可以在终端修改输出字符样式的 npm 包，说直白点就是给字符添加颜色；

文章插图

可能有的同学想到了，这不是跟 chalk 一样的吗？
没错，他们的作用其实就是一样的！
为什么选择 picocolors：

无依赖包；
比 chalk 体积小14倍，速度快2倍；
支持 CJS 和 ESM 项目；

所以大家明白选什么了吧！
当然因为 picocolors 包比较小，所以功能边界没有 chalk 的全面，但是用在一些自研等绝大部分的需求中是完全可以满足的。

注意：
因为历史等原因 vue3 目前还在使用 chalk； vite 已全面用 picocolors 替代作为终端样式输出；不过 chalk 为了优化，在最近的最新版本 v5 中已剔除依赖包；

2. prompts vs enquirer vs inquirer乍一看，可能有的同学会有点懵，其实一句话交代就是：其实他们三都是用来实现命令行交互式界面的工具；
之所以放在一起是因为 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 近两年下载热度趋势：

文章插图

简单总结：

其实 vite 起初也是使用的 enquirer，只是后面为了满足用户跨平台使用时出现的 bug，才替换成了 prompts，当然也并不是说 enquirer 不好，只是场景不同，所以选择会有所不同罢了；
其实如果你想在自己的项目中使用交互式界面工具，我这边还是比较推荐 inquirer 的，毕竟社区受欢迎程度和功能都是完全满足你的需求的。

3. caccac 是一个用于构建 CLI 应用程序的 JAVAScript 库；
通俗点讲，就是给你的 cli 工具增加自定义一些命令，例如 vite create，后面的 create 命令就是通过 cac 来增加的；
因为该库较适用于一些自定义的工具库中，所以只在 vite 中使用，vue3 并不需要该工具；
为什么不用 commander or yargs？
主要是因为 vite 的工具是针对一些自定义的命令等场景不是特别复杂的情况；
我们看看 cac 的优势：

超轻量级：没有依赖，体积数倍小于 commander 和 yargs；
易于学习：只需要学习4 API cli.option、cli.version 、cli.help cli.parse 即可搞定大部分需求；
功能强大：启用默认命令，可以像使用 git 的命令一样方便去使用它，且有参数和选项的校验、自动生成 help 等完善功能；

当然，如果你想写一个功能较多的 cli 工具，也是可以选择 commander 和 yargs 的；
不过一些中小型的 cli 工具我还是比较推荐 cac 的；

4. npm-run-allnpm-run-all 是一个 cli 工具，可以并行、或者按顺序执行多个 npm 脚本；npm-run-all 在 vite 工具源码中有使用；
通俗点讲就是为了解决官方的 npm run 命令无法同时运行多个脚本的问题，它可以把诸如 npm run clean && npm run build:css && npm run build:js && npm run build:html 的一长串的命令通过 glob 语法简化成 npm-run-all clean build:*一行命令。
提供三个命令：