【前端Vue】如何快速直观地查看引入的前端依赖？名称版本、仓库地址、开源协议、作者、依赖介绍、关系树...（Node Modules Inspector）

想要快速直观地查看前端引入依赖的各项信息，传统方式是通过命令行（如 npm ls、pnpm why）查看，信息显示单一且碎片化，没有足够的信息和美观的页面，操作繁琐，而通过Vue 团队成员 antfu 带来的Node Modules Inspector可以实现近乎完美的依赖信息展示效果，只需要简单一条命令就可以查看丰富的依赖相关信息。该工具无需安装，直接在命令行运行即可，使用npx启动：

# 适用于 npm 项目 npx node-modules-inspector # 适用于 pnpm 项目（推荐） pnpx node-modules-inspector

执行后，浏览器会自动打开本地可视化界面，默认端口为 3000。如果端口被占用，工具会提示可用端口。

页面左上角有操作栏，可以切换依赖显示的效果

树形视图

以下是依赖的树形结构展示效果

树形结构可以看到父子组件之间的引用依赖关系

网格视图

上方标签栏可以进行分类规则切换，分别为深度/层级、模块类型、依赖环境（开发/生产）、作者、开源协议、组织、来源，并且在深度/层级分类下，可以看到未被实际引用的冗余依赖Depth null

报告视图

上方标签栏可以进行依赖的具体分类查看，分别为募捐、依赖关系、废弃依赖、多版本依赖、安装大小、发布时间、Node相关、开源许可、全部

图表视图

图表视图具有多种展示方式，图表的每个元素都可以悬停或点击查看具体依赖信息和层级引用关系

依赖对比

该功能可以直观对比任意依赖的结构、大小、引用关系等信息

每个页面的左侧都会显示当前你选中的依赖相关信息，包括名称、用途（简介）、版本、仓库地址、开源协议、作者、引入大小、与其他依赖间的关系等