大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

1.什么是 qnm

前端开发经常需要反复检查 node_modules 目录中安装的模块版本。 当前的解决方案（例如运行 npm list）速度很慢并且会产生大量不相关的输出。而检查特定模块的 package.json 文件中的版本需要做更多的事情，而且无法提供有关同一模块的其他实例的信息。

qnm （querying node_modules）是一个通过提供有关已安装模块的快速且集中的信息来解决此问题的工具，支持 npm 和 yarn，并允许开发者快速识别 node_modules 中感兴趣模块的版本从而提高版本问题的排查效率。

A simple cli utility for querying the node_modules directory

qnm 具有以下丰富特征：

• 支持 交互式模糊搜索
• 支持匹配所有带有特定字符串的包
• 解释当前项目为什么会安装特定的包
• 支持单一仓库
• 显示特定包的特定版本发布时间以及最新版本是什么

目前 qnm 在 Github 通过 MIT 协议开源，有超过 1.8k 的 star、是一个值得关注的前端工具类开源项目。

2.如何使用 qnm

可以使用 Bunx/npx 来运行 qnm，而 Bunx 是最快的方法：

bunx qnm [module]

• Bunx 是 Bun x 的别名，当安装 Bun 时， Bunx CLI 将自动安装。可以使用 Bunx 从 npm 自动安装和运行软件包，相当于 Bun 的 npx 或 yarn dlx 。
• npx 代表 Node Package Execute，包含在 npm 中。如果安装 5.2 以上的 npm，npx 将自动安装。它是 npm 包运行程序，可以执行 npm 注册表中的任何包而无需安装。

例如，如果想查看 lodash 的已安装版本可以通过下面的命令来完成：

bunx qnm lodash
// 使用 bunx命令

此时将会输出如下的内容：

// 类似于一棵树
lodash 4.17.21  2 days ago
├── 4.17.21 
├─┬ cli-table2
│ └── 3.10.1  1 year ago
└─┬ karma
  └── 3.10.1  1 year ago

以下输出表示 node_modules 中出现了 3 次 lodash，同时还包含更多的内容信息：

• ./node_module/lodash
• ./node_module/cli-table2/node_modules/lodash 表示 cli-table2 依赖的 lodash
• ./node_module/karma/node_modules/lodash 表示 karma 依赖的 lodash
• lodash 的最新版本是 4.17.21，2 天前发布
• 另外 2 个 lodash (3.10.1) 是一年前发布的

同时 qnm 还支持模糊搜索，比如下面的示例展示了在 CLI 中运行 qnm 的效果示例：

如上图所述，使用不带参数的 qnm 命令可以用来触发类似 fzf 的模糊搜索。这里值得一提的是，fzf 本质上是一个通用的命令行模糊查找器，代表交互式 Unix 命令行过滤器，可以与任何list一起使用，比如： 文件、命令历史记录、进程、主机名、书签、git 提交等。目前在 Github 上已经有大约 60k+ 的star、妥妥的顶级开源项目。

brew install fzf
// To install useful key bindings and fuzzy completion:
$(brew --prefix)/opt/fzf/install

qnm的模糊搜索功能也非常优秀，支持以下丰富功能：

• 开始输入内容以过滤 node_modules 中的匹配项
• 使用箭头上下移动光标
• Enter 键选择项目，CTRL-C / ESC 退出
• TAB 和 Shift-TAB 用于标记多个项目

同时 qnm 还支持众多高级配置，比如：

• --no-remote：不从 npm 获取远程数据，如果希望 qnm 运行得更快，请使用此选项。 qnm 将显示有限的视图。
• -o , --open：使用默认编辑器打开模块的 package.json 文件。
• -d, --debug：查看完整的错误消息，主要用于调试。
• --disable-colors：禁用大部分颜色和样式， 例如：版本颜色。

3.命令行工具

• doctor

显示 node_modules 中最重的模块，如果想了解 node_modules 目录上什么包占用了最多的空间，这会很有帮助。

bunx qnm doctor

下面根据模块在 node_modules 中的重复数量对模块进行排序。

bunx qnm doctor --sort duplicates
// 按照重复次数排序

• list

下面 list命令返回node_modules目录中所有模块的列表。

bunx qnm list
// 类似于 npm list

• match

match 与 grep 类似，并且匹配包含所提供字符串的任何模块。 例如，下面命令用于查看安装了哪些 eslint 插件：

> bunx qnm match eslint-plug

eslint-plugin-babel
└── 3.3.0

eslint-plugin-lodash
└── 2.6.1

eslint-plugin-mocha
└── 4.12.1

eslint-plugin-react
└── 6.10.3

关于 qnm 的更多特性和用法可以参考文末的资料，本文不再过多展开。

4.qnm注意事项

虽然 qnm 过去是全局安装，但依然建议开发者使用npx/bunx来运行，它的速度更快。 如果确实更喜欢全局安装，可以使用以下命令进行：

npm i --global qnm

目前最新的版本是 v2.10.3 ，该版本的主要修改是通过缓存更多 getter 来提高性能，而从 v 2.0.0 版本开始 qnm 就陆续带来了很多重大的优秀的变更：

• 显示每个包的发布时间，以及最新版本是什么
• 将 path-parse 从 1.0.6 提升到 1.0.7
• 将 Hosted-git-info 从 2.8.8 升级到 2.8.9
• 将 trim-newlines 从 3.0.0 修改为 3.0.1
• 将标准化 url 从 4.5.0 提升到 4.5.1
• 将 glob-parent 从 5.1.1 提升到 5.1.2
• 将 ws 从 7.4.1 提升到 7.4.6
• lodash 从 4.17.20 到 4.17.21
• 支持 Node.js >= 12

本文总结

本文主要和大家介绍 qnm，即一个通过提供有关已安装模块的快速且集中的信息来解决此问题的工具，支持 npm 和 yarn，并允许开发者快速识别 node_modules 中感兴趣模块的版本从而提高版本问题的排查效率。

因为篇幅有限，文章并没有过多展开。如果有兴趣，文末的参考资料提供了大量优秀文档以供学习。

参考资料

https://github.com/ranyitz/qnm

https://www.codingninjas.com/studio/library/difference-between-npm-and-npx

https://github.com/junegunn/fzf

https://github.com/ranyitz/qnm

https://github.com/junegunn/fzf

https://github.com/ranyitz/qnm/blob/master/CHANGELOG.md