正所谓：工欲善其事，必先利其器！写一个开源的项目也不例外，就拿在国内很火的 vue3 框架 和 vite 工具 来讲，其中的实现与架构设计无不是一个 复杂而庞大的工程，而支撑这些工程能顺利运行的无不是一个又一个的轮子，正好最近有在阅读 vue3 和 vite3 的源码，发现一些较实用的轮子，在这里分享给大家。

如果你想对 前端工程化 有所涉猎的话，我相信下面的工具总有一款是你想要的！

1. picocolors

picocolors 是一个可以在终端修改输出字符样式的 npm 包，说直白点就是给字符添加颜色；

可能有的同学想到了，这不是跟 chalk 一样的吗？

没错，他们的作用其实就是一样的！

为什么选择 picocolors：

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

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

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

2. prompts vs enquirer vs inquirer

乍一看，可能有的同学会有点懵，其实一句话交代就是：其实他们三都是用来 实现命令行交互式界面 的工具；

之所以放在一起是因为 vue3 和 vite 所使用的交互式工具不尽相同；

npm 近两年下载热度趋势：

简单总结：

• 其实 vite 起初也是使用的 enquirer，只是后面为了满足用户跨平台使用时出现的 bug，才替换成了 prompts，当然也并不是说 enquirer 不好，只是场景不同，所以选择会有所不同罢了；

• 其实如果你想在自己的项目中使用 交互式界面 工具，我这边还是比较推荐 inquirer 的，毕竟社区受欢迎程度和功能都是完全满足你的需求的。

3. cac

cac 是一个用于构建 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 等完善功能；

4. npm-run-all

npm-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:* 一行命令。

提供三个命令：

• npm-run-all：
  • 可以带 -s 和 -p 参数的简写，分别对应串行和并行；

  # 依次执行这三个任务命令
  npm-run-all clean lint build
  
  # 同时执行这两个任务命令
  npm-run-all --parallel lint build
  
  # 先串行执行 a 和 b, 再并行执行 c 和 d
  npm-run-all -s a b -p c d

  登录后复制
• run-s：为 npm-run-all --serial的缩写；
• run-p：为 npm-run-all --parallel的缩写；

5. semver

semver 是一个语义化版本号管理的 npm 库；semver 在 vue3 框架源码和 vite 工具源码中都有使用；

说直白一点，你在开发一个开源库的时候，肯定会遇到要提醒用户不同版本号不同的情况，那么如何去判断用户版本过低，semver 就可以很好的帮助你解决这个问题；

semver 内置了许多方法，比如 判断一个版本是否合法，判断版本号命名是否正确，两个版本谁大谁小之类 等等方法；

如下列一些官网的例子：

const semver = require('semver')

semver.valid('1.2.3') // '1.2.3'
semver.valid('a.b.c') // null
semver.clean('  =v1.2.3   ') // '1.2.3'
semver.satisfies('1.2.3', '1.x || >=2.5.0 || 5.0.0 - 7.2.3') // true
semver.gt('1.2.3', '9.8.7') // false
semver.lt('1.2.3', '9.8.7') // true
semver.minVersion('>=1.0.0') // '1.0.0'
semver.valid(semver.coerce('v2')) // '2.0.0'
semver.valid(semver.coerce('42.6.7.9.3-alpha')) // '42.6.7'

最后

以上就是美好保温杯最近收集整理的关于秒懂Vue3+Vite3源码，只要会这20个库！的全部内容，更多相关秒懂Vue3+Vite3源码内容请搜索靠谱客的其他文章。