【前端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相关、开源许可、全部

图表视图

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

依赖对比

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

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

相关推荐
Java陈序员2 小时前
太香了!一款轻量级的 Elasticsearch 可视化管理工具!
vue.js·elasticsearch·vite
万物得其道者成4 小时前
前端大整数精度丢失:一次踩坑后的实战解决方案(`json-bigint`)
前端·json
鹏北海5 小时前
移动端 H5 响应式字体适配方案完全指南
前端
姜太公钓鲸2335 小时前
ROM就是程序存储器,实际的存储介质是Flash闪存。上述描述中的程序存储器是什么意思?
开发语言·javascript·ecmascript
柳杉6 小时前
使用AI从零打造炫酷医疗数据可视化大屏,源码免费拿!
前端·javascript·数据可视化
凌云拓界6 小时前
前端开发的“平衡木”:在取舍之间找到最优解
前端·性能优化·架构·前端框架·代码规范·设计规范
zhengfei6117 小时前
【XSS payload 】一个经典的XSS payload
前端·xss
简单Janeee7 小时前
[Vue 3 从零到上线]-第四篇:组件化思维——把网页像积木一样拆解
javascript·vue.js·ecmascript
全栈老石8 小时前
手写一个无限画布 #1:坐标系的谎言
前端·canvas
XW01059998 小时前
4-11判断素数
前端·python·算法·素数