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

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

bash 复制代码
# 适用于 npm 项目

npx node-modules-inspector



# 适用于 pnpm 项目(推荐)

pnpx node-modules-inspector

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

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

树形视图

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

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

网格视图

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

报告视图

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

图表视图

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

依赖对比

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

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

相关推荐
泯泷29 分钟前
第 2 篇:设计第一套字节码:Opcode、Instruction 与 Constant Pool
前端·javascript·安全
妙码生花29 分钟前
从 PHP 到 AI + Golang,程序员自救转型手记(十五):优化细节、网络请求封装
前端·后端·ai编程
泯泷29 分钟前
第 1 篇:从 1 + 2 开始:亲手写出第一台 JSVM
前端·javascript·安全
团团崽_七分甜31 分钟前
Spring Boot 核心知识点总结
前端
lichenyang4531 小时前
从一个按钮开始,理解 ASCF 框架到底在做什么
前端
古夕1 小时前
第三方 SSO 接入实践:redirect_uri 编码、回调一致性与跨项目联调
前端·vue.js
朦胧之1 小时前
页面白屏卡住排查方法
前端·javascript
用户593608741401 小时前
Playwright 黑魔法:用 ClipboardEvent 绕过 React 富文本编辑器
前端
Ruihong1 小时前
Vue withDefaults 转 React:VuReact 怎么处理?
vue.js·react.js·面试
石山岭2 小时前
自己动手写了一个 Android 虚拟定位 App:GPSSimulate 技术实
android·前端