WebStorm无内置可视化依赖树，需用Terminal执行npm ls命令分析：如npm ls --depth=2查层级、npm ls lodash定位引入源、npm ls --all | grep "UNMET"找缺失peer deps、npm ls <pkg> --why查版本冲突，配合require.resolve验证实际加载路径。
直接在 WebStorm 里看 npm ls 输出不现实
WebStorm 本身没有内置的「可视化依赖树」面板，也不会自动解析 node_modules 并渲染成树状图。你点开 package.json 右上角的“Dependency Diagram”按钮，看到的只是顶层依赖（dependencies 和 devDependencies 的扁平列表），不是真正的递归依赖树。
真正能查清谁依赖了谁、是否存在重复/冲突/幽灵依赖的，还是得靠命令行的 npm ls 或 pnpm ls，WebStorm 只能帮你更顺滑地调用和查看它。
用 Terminal 面板运行 npm ls 并过滤关键信息
别切出 IDE 去终端，就在 WebStorm 底部打开 Terminal 面板（Alt+F12），执行带参数的命令：
-
npm ls --depth=2：只展开两层，避免刷屏；--depth=0看顶层，--depth=3查深层冲突时再加 -
npm ls lodash：查某个包被哪些依赖间接引入（定位幽灵版本来源） -
npm ls --all | grep "UNMET"：快速揪出缺失 peer deps（常见于 React/Vue 插件报错） - 加
--json不推荐——输出是 JSON 流，WebStorm 终端不支持折叠/高亮，反而难读
依赖冲突时优先看 npm ls <pkg> --why
当你发现控制台报 Cannot find module 'react-dom/client' 或 HMR 失败，大概率是同一包多个版本共存。这时不要猜，直接问 npm：
-
npm ls react-dom --why输出会显示：哪个包显式写了react-dom，哪个又通过子依赖带入了旧版 - 输出里出现
deduped表示已被去重；出现两次不同路径，就说明有版本打架 - 注意：这个命令要求 npm ≥ 8.3，老项目用 npm 6 的话得先升级或改用
npx npm-check-updates -u扫描
WebStorm 的 “External Libraries” 视图只能信一半
左侧项目结构里的 External Libraries → node_modules 看起来很全，但它只是按文件夹列出来，不反映实际解析链路：
- 它不会标出软链接（比如 pnpm 的硬链接结构）、也不会标记被
overrides强制替换的包 -
require('lodash')在代码里到底加载的是node_modules/lodash还是node_modules/axios/node_modules/lodash？这个视图完全不体现 - 真要验证加载路径，得在代码里加
console.log(require.resolve('lodash'))运行时看输出
依赖分析最不可靠的，就是只看文件存在与否。哪怕 node_modules 里有 5 个版本的 immer，运行时只用到其中一个——而那个到底是哪个，只有 npm ls --why 和运行时 require.resolve 能说清。
