使用npm查看依赖树时如何隐藏关联路径？

问题描述 #

使用npm ls lodash查看项目依赖树时，输出包含大量冗余的关联路径信息，即使添加--depth=1参数也无法隐藏这些路径。当前项目采用pnpm作为包管理器，需要更清晰的依赖树展示方式。

解决方案 #

1. 改用pnpm原生命令（推荐） #

既然项目使用pnpm，直接用pnpm的命令能更好适配其依赖结构，自带隐藏路径的参数：

• 查看直接依赖lodash的包（无冗余路径）：

pnpm ls lodash --depth=1 --no-paths

输出会仅保留包名和版本，移除-> ./node_modules/...这类路径内容。

• 精准溯源依赖关系：
  使用pnpm why lodash命令，专门展示哪些包依赖了lodash，输出简洁直观，默认不显示冗余路径：

pnpm why lodash

2. 过滤npm输出的冗余路径 #

如果必须使用npm命令，可通过管道过滤掉路径部分：

npm ls lodash --depth=1 | awk '{sub(/->.*/, ""); print}'

该命令会移除每行中->及之后的路径内容，仅保留包名和版本信息。

3. 使用第三方工具简化依赖树展示 #

• dependency-cruiser：生成结构化依赖报告，支持过滤和自定义输出：
  先安装依赖：

  pnpm add -D dependency-cruiser
  

  查看lodash的依赖链：

  depcruise --include-only "^lodash" --output-type plain .
  

• tree-node-modules：以树状结构展示指定包的依赖关系：
  全局安装后执行：

  pnpm add -g tree-node-modules
  tree-node-modules -p lodash
  

处理后示例 #

原npm ls lodash --depth=1的输出经过--no-paths处理后，会呈现更简洁的格式：

texhub-web@0.1.0 /Users/xiaoqiangjiang/source/reddwarf/frontend/texhub-web
├─┬ @ant-design/icons@5.3.5
│ └── lodash@4.17.21
├─┬ @testing-library/jest-dom@5.17.0
│ └── lodash@4.17.21
├─┬ antd@5.15.4
│ └── lodash@4.17.21 deduped
├── lodash@4.17.21
└─┬ rdy-websocket@1.5.0
  └── lodash@4.17.21

内容的提问来源于stack exchange，提问作者Dolphin