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

图表视图

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

依赖对比

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

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

相关推荐
一叶飘零晋3 分钟前
【(一)Electron 使用之如何用vite+vue3搭建初始框架】
前端·javascript·electron
光影少年14 分钟前
前端SSR和ssg区别
前端·vue.js·人工智能·学习·react.js
广州华水科技18 分钟前
北斗形变监测传感器在水库安全监测中的应用与发展
前端
凯瑟琳.奥古斯特1 小时前
Bootstrap快速上手指南
开发语言·前端·css·bootstrap·html
精益数智工坊1 小时前
拆解制造业仓库物料管理流程:如何通过标准化仓库物料管理流程解决账实不符难题
大数据·前端·数据库·人工智能·精益工程
恶猫1 小时前
网页自动化模拟操作时,模拟真实按键触发事件【终级方案】
前端·javascript·自动化·vue·网页模拟
小羊Yveesss1 小时前
2026年前端开发新趋势:智能协同、工具革新与场景深耕
前端·ai
Dxy12393102161 小时前
HTML中的Canvas可以干哪些事情
前端·html
悟乙己2 小时前
解析 Agent 时代的 HTML PPT SKILLS: html-ppt-skill
前端·html·powerpoint
ZC跨境爬虫2 小时前
跟着 MDN 学 HTML day_2:(表单分组与高级输入控件实战)
前端·javascript·css·ui·html