qnm 它早该火了！前端大型项目必需品？

Hello，大家好，我是 Sunday。

当我们进行项目开发时，会经常需要反复检查 node_modules 目录中安装的模块版本。现有的解决方案（比如运行 npm list）速度缓慢，输出内容也杂乱无章。想要查看特定模块的 package.json 文件中的版本信息，需要耗费更多时间和步骤。同时，无法获取同一模块的其他实例相关信息。

所以此时，我们就需要一个东西，帮助我们更好地处理 node_modules 目录检查的问题，那么它就是 qnm

什么是 qnm？

qnm is a tool that solves this problem by providing fast and focused information about the installed modules. It supports both npm and yarn and allows you to quickly identify the versions of the modules you are interested in.

qnm 是一个解决 快速翻阅node_modules目录 的工具，它能够快速、集中地提供已安装模块的相关信息。它支持 npm 和 yarn，让您迅速查找感兴趣模块的版本信息。

qnm 拥有丰富的功能特性：

交互式模糊搜索，让查找更加便捷
支持匹配所有包含特定字符串的模块
解释当前项目为何安装特定包的原因
单一仓库支持
显示特定包的发布时间及最新版本信息

这个前端工具类开源项目已在 GitHub 上以 MIT 许可证开源，拥有超过 1.8k 的星标，绝对是一个值得关注的项目！

如何使用 qnm？

Bunx 是 Bun x 的简写，安装了 Bun 后，Bunx CLI 就会自动安装。它可以帮助你自动安装和运行 npm 中的软件包，类似于 Bun 的 npx 或 yarn dlx。
npx 则是 npm 的一部分，代表着 Node Package Execute。如果你安装的是 5.2 及以上版本的 npm，那么 npx 会自动跟随安装。它可以直接运行 npm 注册表中的包，无需事先安装。

要使用 qnm，可以通过 Bunx/npx 运行它，我们以 Bunx 为例：

bash 复制代码

bunx qnm [module]

举例来说，如果你想查看已安装的 lodash 版本，只需运行：

bash 复制代码

bunx qnm lodash

然后会得到一个类似树状结构的输出，显示了已安装的 lodash 版本以及它们所在的路径和发布时间。

sql 复制代码

// 树状结构
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

在这里，你可以看到最新版本是 4.17.21，发布于 2 天前，而其他两个版本是一年前发布的。

同时 qnm 还支持模糊搜索：

使用不带参数的 qnm 命令，就像触发 fzf 的模糊搜索一样。

fzf 是一个通用的命令行模糊搜索工具，用于与各种列表一起使用，比如文件、命令历史、进程、主机名、书签、甚至是 git 提交等等。github 地址：github.com/junegunn/fz...

目前在 GitHub 上已经获得了超过 60,000 个星标，是一个备受关注的顶级开源项目。

bash 复制代码

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

和 fzf 类似。qnm 的模糊搜索功能也非常厉害，提供了以下丰富功能：

可以输入内容进行筛选，快速过滤 node_modules 中的匹配项目。
使用箭头键上下移动光标，Enter 键选择项目，CTRL-C / ESC 退出。
使用 TAB 和 Shift-TAB 标记多个项目。

此外，QNM 还支持多种高级配置，例如：

--no-remote：加快运行速度，不从 npm 获取远程数据，提供更简洁的视图。
-o , --open：使用默认编辑器打开模块的 package.json 文件。
-d, --debug：查看完整的错误消息，主要用于调试。
--disable-colors：禁用大部分颜色和样式，如版本颜色。

命令行操作

我们可以直接通过 doctor 命令来显示 node_modules 中依赖 "比重（体积）" 对比。当我们想要剔除一个高比重（体积）的包时，就会非常有用了（比如通过 cdn 外链）。

bash 复制代码

bunx qnm doctor --sort duplicates

更多内容可以查看 github 地址：github.com/ranyitz/qnm

前端训练营：1v1私教，终身辅导计划，帮你拿到满意的 offer。 已帮助数百位同学拿到了中大厂 offer。欢迎来撩~~~~~~~~