在前端开发领域，node_modules 一直是项目管理中的一个“重量级”存在。

其庞大的体积和复杂的依赖关系而让开发者们头疼不已。

传统的依赖管理工具虽然功能强大，但往往缺乏直观的可视化界面，使得开发者在排查依赖问题时如同在迷宫中摸索。

今天，要向大家介绍一个由 Vue 团队成员 antfu 倾力打造的神器——Node Modules Inspector

它将彻底改变你对 node_modules 的管理方式，让依赖管理变得前所未有的直观和高效。

Node Modules Inspector 是什么？

Node Modules Inspector 是一个专为前端开发者设计的可视化工具，它能够以图形化的方式呈现 node_modules 中的依赖关系。

无论是使用 pnpm 还是 npm 的项目，都可以轻松地通过这个工具来查看和分析项目的依赖结构。

• 直观的图形化界面：通过清晰的图表，你可以一目了然地看到各个依赖之间的关系，轻松定位冲突或冗余的依赖。

• 强大的分析能力：帮助开发者快速识别项目中的潜在问题，优化依赖结构，提升项目性能。

• 简单易用：无需复杂的配置，只需一条命令，即可启动可视化界面。

如何快速上手？

一键启动

在你的项目根目录下，运行以下命令即可启动 Node Modules Inspector：

pnpx node-modules-inspector
npx node-modules-inspector

• NPX：允许你直接运行 NPM 注册表上的任何 JavaScript 包，无需事先安装。
• pnpx：pnpm 的专属工具，用于获取包而不将其安装为依赖项，并运行其公开的命令。

个性化配置

为了满足不同项目的需求，你可以在项目根目录中创建一个配置文件 node-modules-inspector.config.ts，来自定义工具的行为：

import { defineConfig } from 'node-modules-inspector'
export default defineConfig({
  defaultFilters: {
    excludes: [
      'eslint', // 排除不需要显示的依赖
    ],
  },
  defaultSettings: {
    moduleTypeSimple: true, // 简化模块类型显示
  },
  publint: true, // 启用实验性的 publint 功能
})

生成静态页面

如果你希望生成一个静态的可视化页面，可以运行以下命令：

pnpx node-modules-inspector build
npx node-modules-inspector build

生成的静态文件将保存在 .node-modules-inspector 文件夹中，你可以使用任何静态文件服务器来托管这些文件。

为什么你需要 Node Modules Inspector？

• 直观的可视化：通过图形化界面，你可以快速了解项目的依赖关系，轻松找到问题的根源。
• 快速定位问题：依赖冲突、冗余依赖等问题在开发中屡见不鲜。Node Modules Inspector 能够帮助你快速定位这些问题。
• 优化项目性能：通过分析依赖结构，你可以发现不必要的依赖，优化项目的依赖树，从而提升项目的性能和加载速度。

在线体验

如果你不想在本地安装工具，可以直接访问 Node Modules Inspector 的在线版本：https://node-modules.dev/。

这个在线版本由 WebContainer 提供支持，允许你在浏览器中直接创建和运行项目，无需安装任何额外的软件或依赖项。

Node Modules Inspector 是 Vue 团队成员的又一力作，它不仅填补了前端依赖管理领域的一个空白，更为开发者提供了一个强大的工具。

无论是初学者还是资深开发者，都可以通过这个工具更好地理解和优化项目的依赖关系。

如果你还在为 node_modules 的复杂性而烦恼，不妨试试这个神器，它可能会成为你开发流程中不可或缺的一部分！

• Node Modules Inspector Github 地址：https://github.com/antfu/node-modules-inspector
• Node Modules Inspector 在线体验地址：https://node-modules.dev/