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

图表视图

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

依赖对比

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

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

相关推荐
小江的记录本15 分钟前
【JEECG Boot】 JEECG Boot 数据字典管理——六大核心功能(内含:《JEECG Boot 数据字典开发速查清单》)
java·前端·数据库·spring boot·后端·spring·mybatis
小江的记录本15 分钟前
【JEECG Boot】 JEECG Boot——Online表单 系统性知识体系全解
java·前端·spring boot·后端·spring·低代码·mybatis
John_ToDebug16 分钟前
Chromium 页面类型与 IPC 通信机制深度解析
前端·c++·chrome
Fanfffff72017 分钟前
前端进阶:从请求竞态到并发控制(系统学习笔记)
前端·笔记·学习
大、男人18 分钟前
edge浏览器打开baidu.com很慢,我是如何解决的
前端·edge
吴声子夜歌19 分钟前
ES6——函数的扩展详解
前端·ecmascript·es6
斌味代码20 分钟前
Next.js 14 App Router 完全指南:服务端组件、流式渲染与中间件实战
开发语言·javascript·中间件
有趣的老凌20 分钟前
一篇文章带你了解 Agent Skills —— 告别AI“失控”
前端·agent·claude
~ rainbow~23 分钟前
前端转型全栈(二)——NestJS 入门指南:从 Angular 开发者视角理解后端架构
前端·javascript·angular.js