以下是查看前端項目依賴樹型結構關系圖的詳細方法，涵蓋 命令行工具 和 可視化工具：

---

一、命令行工具生成依賴樹

1. npm

# 查看項目依賴樹（文本形式）
npm ls# 查看指定包的依賴樹
npm ls <package-name># 生成JSON格式的依賴樹（可后續轉換為可視化圖表）
npm ls --json > dependencies.json

2. yarn

# 查看依賴樹（文本形式）
yarn list# 查看指定包的依賴樹
yarn list <package-name># 生成JSON格式的依賴樹
yarn為什么安裝某個包（解釋依賴路徑）：
yarn why <package-name>

3. pnpm

# 查看依賴樹（文本形式）
pnpm ls# 查看指定包的依賴樹
pnpm ls <package-name># 生成JSON格式的依賴樹
pnpm ls --json > dependencies.json

---

二、可視化工具生成依賴樹

1. npm包：madge

• 安裝：

  npm install -g madge
  

• 生成圖表：

  madge --jsonp ./node_modules | madge --image dependencies.png
  

• 支持格式：PNG、SVG、DOT、JSON。

2. npm包：depcheck

• 安裝：

  npm install -g depcheck
  

• 生成依賴分析報告：

  depcheck --unused --duplicates
  

• 功能：檢測未使用的依賴、重復依賴，并輸出文本報告。

3. npm包：npm dep-graph

• 安裝：

  npm install -g dep-graph
  

• 生成圖表：

  dep-graph --file dependencies.dot
  dot -Tpng dependencies.dot -o dependencies.png
  

• 依賴：需安裝 graphviz 工具（用于轉換DOT文件為圖片）。

4. 在線工具：Dependabot

• 使用步驟：
  1. 將 package.json 或 yarn.lock 文件上傳到 Dependabot。
  2. 自動生成依賴關系圖并分析版本更新。

5. IDE集成工具

• VS Code插件：
  • Dependents：顯示文件的依賴關系。
  • npm Dependency Graph：可視化依賴樹。

---

三、高級用法與注意事項

1. 過濾依賴層級

# 限制顯示層級（如只顯示3層）
npm ls --depth=3

2. 排查版本沖突

• npm/yarn/pnpm：

  # 查看指定包的版本沖突路徑
  npm why <package-name>  # 僅npm支持
  yarn why <package-name>
  

3. 生成交互式圖表

• 工具：bundlephobia
  • 訪問 BundlePhobia。
  • 輸入包名和版本，查看依賴樹及打包體積分析。

4. 處理大型項目

• 優化命令：

  # 過濾非必要包（如devDependencies）
  npm ls --production
  

---

四、依賴樹示例（文本形式）

$ npm ls react
your-project@1.0.0 /path/to/project
└─┬ react@18.2.0├─┬ react-dom@18.2.0│ └── react@18.2.0  deduped└─┬ react-router-dom@6.16.0└── react@18.2.0  deduped

---

五、總結

工具/方法	適用場景	輸出形式
npm/yarn/pnpm ls	快速查看文本依賴樹	終端文本
madge	生成圖片格式的依賴關系圖	PNG/SVG
depcheck	分析未使用依賴和重復依賴	終端文本報告
Dependabot	在線分析依賴版本與沖突	交互式網頁圖表
npm why	排查指定包的安裝原因	終端路徑解釋

---

通過上述方法，可以清晰地查看依賴關系、排查版本沖突，并優化項目依賴管理。