模块依赖图
借助 WebStorm，您可以在 JavaScript 和 TypeScript 项目中的上下文内可视化 import 和 export。
构建模块依赖图
在 JavaScript、TypeScript 或 HTML 文件的上下文菜单中，或文件夹的上下文菜单中选择 。
该操作不适用于 node_modules 和
Excluded文件夹。
分析模块依赖图
WebStorm 会分析所选文件或所选文件夹中所有文件中的 import 和 require 语句以及 script 标签，递归处理，并在单独标签页中显示这些文件之间依赖关系的图表：
一个图表由多个矩形组成。 每个矩形显示一个 已分析的所选文件 的名称和检测到的 import 列表。 如果某个 import 已解析，则会在其旁边显示一个指示导入符号类型的图标（如
或 
）。从 分析文件 指向 目标文件 的箭头表示检测到的导入来自该目标文件。 如果 目标文件 是库，其名称将显示在灰色背景中。 如果来自库的 import 未解析，则 目标文件 将以带红色边框的灰色矩形显示。
已解析的 import 和 export 分别标记为
或 
图标。
从图表导航到源代码
要从图表跳转到文件，请右键点击该文件并从上下文菜单中选择 。
要导航到源代码中的特定
import语句，在图表中右键点击所需的文件，选择上下文菜单中的 ，然后从 选择导航目标 列表中选择要跳转的符号：
最后修改日期： 2025年 9月 26日