在前端開(kāi)發(fā)領(lǐng)域，node_modules 一直是項(xiàng)目管理中的一個(gè)“重量級(jí)”存在。

其龐大的體積和復(fù)雜的依賴關(guān)系而讓開(kāi)發(fā)者們頭疼不已。

傳統(tǒng)的依賴管理工具雖然功能強(qiáng)大，但往往缺乏直觀的可視化界面，使得開(kāi)發(fā)者在排查依賴問(wèn)題時(shí)如同在迷宮中摸索。

今天，我要向大家介紹一個(gè)由 Vue 團(tuán)隊(duì)成員 antfu 傾力打造的神器——Node Modules Inspector。

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

一、Node Modules Inspector 是什么？

Node Modules Inspector 是一個(gè)專為前端開(kāi)發(fā)者設(shè)計(jì)的可視化工具，它能夠以圖形化的方式呈現(xiàn) node_modules 中的依賴關(guān)系。

無(wú)論是使用 pnpm 還是 npm 的項(xiàng)目，都可以輕松地通過(guò)這個(gè)工具來(lái)查看和分析項(xiàng)目的依賴結(jié)構(gòu)。

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

• 強(qiáng)大的分析能力：幫助開(kāi)發(fā)者快速識(shí)別項(xiàng)目中的潛在問(wèn)題，優(yōu)化依賴結(jié)構(gòu)，提升項(xiàng)目性能。

• 簡(jiǎn)單易用：無(wú)需復(fù)雜的配置，只需一條命令，即可啟動(dòng)可視化界面。

二、如何快速上手？

1. 一鍵啟動(dòng)

在你的項(xiàng)目根目錄下，運(yùn)行以下命令即可啟動(dòng) Node Modules Inspector：

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

• NPX：允許你直接運(yùn)行 NPM 注冊(cè)表上的任何 JavaScript 包，無(wú)需事先安裝。
• pnpx：pnpm 的專屬工具，用于獲取包而不將其安裝為依賴項(xiàng)，并運(yùn)行其公開(kāi)的命令。

2. 個(gè)性化配置

為了滿足不同項(xiàng)目的需求，你可以在項(xiàng)目根目錄中創(chuàng)建一個(gè)配置文件 node-modules-inspector.config.ts，來(lái)自定義工具的行為：

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

3. 生成靜態(tài)頁(yè)面

如果你希望生成一個(gè)靜態(tài)的可視化頁(yè)面，可以運(yùn)行以下命令：

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

生成的靜態(tài)文件將保存在 .node-modules-inspector 文件夾中，你可以使用任何靜態(tài)文件服務(wù)器來(lái)托管這些文件。

三、為什么你需要 Node Modules Inspector？

• 直觀的可視化：通過(guò)圖形化界面，你可以快速了解項(xiàng)目的依賴關(guān)系，輕松找到問(wèn)題的根源。
• 快速定位問(wèn)題：依賴沖突、冗余依賴等問(wèn)題在開(kāi)發(fā)中屢見(jiàn)不鮮。Node Modules Inspector 能夠幫助你快速定位這些問(wèn)題。
• 優(yōu)化項(xiàng)目性能：通過(guò)分析依賴結(jié)構(gòu)，你可以發(fā)現(xiàn)不必要的依賴，優(yōu)化項(xiàng)目的依賴樹(shù)，從而提升項(xiàng)目的性能和加載速度。

四、在線體驗(yàn)

如果你不想在本地安裝工具，可以直接訪問(wèn) Node Modules Inspector 的在線版本：https://node-modules.dev/。

這個(gè)在線版本由 WebContainer 提供支持，允許你在瀏覽器中直接創(chuàng)建和運(yùn)行項(xiàng)目，無(wú)需安裝任何額外的軟件或依賴項(xiàng)。

Node Modules Inspector 是 Vue 團(tuán)隊(duì)成員的又一力作，它不僅填補(bǔ)了前端依賴管理領(lǐng)域的一個(gè)空白，更為開(kāi)發(fā)者提供了一個(gè)強(qiáng)大的工具。

無(wú)論是初學(xué)者還是資深開(kāi)發(fā)者，都可以通過(guò)這個(gè)工具更好地理解和優(yōu)化項(xiàng)目的依賴關(guān)系。

如果你還在為 node_modules 的復(fù)雜性而煩惱，不妨試試這個(gè)神器，它可能會(huì)成為你開(kāi)發(fā)流程中不可或缺的一部分！

• Node Modules Inspector Github 地址：https://github.com/antfu/node-modules-inspector
• Node Modules Inspector 在線體驗(yàn)地址：https://node-modules.dev/