在前端開發領域，node_modules 一直是項目管理中的一個“重量級”存在。

其龐大的體積和復雜的依賴關系而讓開發者們頭疼不已。

傳統的依賴管理工具雖然功能強大，但往往缺乏直觀的可視化界面，使得開發者在排查依賴問題時如同在迷宮中摸索。

今天，我要向大家介紹一個由 Vue 團隊成員 antfu 傾力打造的神器——Node Modules Inspector。

它將徹底改變你對 node_modules 的管理方式，讓依賴管理變得前所未有的直觀和高效。

一、Node Modules Inspector 是什么？

Node Modules Inspector 是一個專為前端開發者設計的可視化工具，它能夠以圖形化的方式呈現 node_modules 中的依賴關系。

無論是使用 pnpm 還是 npm 的項目，都可以輕松地通過這個工具來查看和分析項目的依賴結構。

• 直觀的圖形化界面：通過清晰的圖表，你可以一目了然地看到各個依賴之間的關系，輕松定位沖突或冗余的依賴。

• 強大的分析能力：幫助開發者快速識別項目中的潛在問題，優化依賴結構，提升項目性能。

• 簡單易用：無需復雜的配置，只需一條命令，即可啟動可視化界面。

二、如何快速上手？

1. 一鍵啟動

在你的項目根目錄下，運行以下命令即可啟動 Node Modules Inspector：

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

• NPX：允許你直接運行 NPM 注冊表上的任何 JavaScript 包，無需事先安裝。
• pnpx：pnpm 的專屬工具，用于獲取包而不將其安裝為依賴項，并運行其公開的命令。

2. 個性化配置

為了滿足不同項目的需求，你可以在項目根目錄中創建一個配置文件 node-modules-inspector.config.ts，來自定義工具的行為：

import { defineConfig } from 'node-modules-inspector'
export default defineConfig({
  defaultFilters: {
    excludes: [
      'eslint', // 排除不需要顯示的依賴
    ],
  },
  defaultSettings: {
    moduleTypeSimple: true, // 簡化模塊類型顯示
  },
  publint: true, // 啟用實驗性的 publint 功能
})

3. 生成靜態頁面

如果你希望生成一個靜態的可視化頁面，可以運行以下命令：

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/