有没有办法获取项目的依赖关系图？

Question

我正在寻找类似于

-M

标志

gcc

接受的东西，但对于

tsc

。

Answer 1

依赖巡洋舰可以生成依赖关系图：

您可以通过

npm

安装它（无论如何它都可以与 npx 一起使用）：

$ npm install --save-dev dependency-cruiser

为了确保 TypeScript 支持正常工作，您应该首先运行：

$ npx depcruise --info

您可以创建一个包含 TypeScript 文件之间依赖关系的 JSON 文件：

$ npx depcruise --no-config \
--exclude "^node_modules" \
--output-type json \
[your_entry_point.ts] > dependencies.json

如果您安装了

dot

中包含的

graphviz

实用程序，您可以生成 SVG

$ npx depcruise --no-config \
--exclude "^node_modules" \
--output-type dot \
[your_entry_point.ts] > dependencies.dot
$ dot dependencies.dot -T svg -o dependencies.svg

Dot 支持许多其他输出格式并且

graphviz

可作为大多数 Linux 发行版和其他操作系统的软件包使用

Answer 2

我创建了ts-dependency-graph，因为依赖巡洋舰从未完成我相当大的项目。它包含一些处理大型依赖图的选项。

npm i ts_dependency_graph -g

ts_dependency_graph --start src/index.ts

复制输出，例如到https://dreampuf.github.io/GraphvizOnline/

 ts_dependency_graph --help
Options:
  --help                        Show help                              [boolean]
  --version                     Show version number                    [boolean]
  --start                       the starting file, for the analysis     [string]
  --aggregate_by_folder, --agg  create graph on folder level
                                                      [boolean] [default: false]
  --max_depth                                           [number] [default: 1000]
  --filter                      filters files containing the provided strings
                                                           [array] [default: []]
  --verbose, -v                 prints information about ignored files
                                                      [boolean] [default: false]
  --hotspots, -h                identify hotspots, by analyzing number of
                                incoming and outgoing edges
                                                      [boolean] [default: false]
  --base_path                   calculates path relatives to the base path
   [string] [default: "/currentpath"]

Answer 3

如果您使用

vite

并且想要分析您的包并查看哪个文件正在导入不同的依赖项，您可以使用

vite-bundle-visualizer

。

1. 运行

   vite-bundle-visualizer

   ，您将看到捆绑包的树状图，如果将鼠标悬停在它们上方，您将在“导入者”部分中看到它们的导入位置。 但这并不总是有帮助。

2. 运行

   vite-bundle-visualizer -t network

   ，它将向您显示所有依赖项的图表。 但根据项目的规模，这很难处理。

3. 运行

   vite-bundle-visualizer -t json -o bundle.json

   。然后在编辑器中打开JSON，找到所需的文件并获取其id，然后在其他文件的

   importedBy

   属性中找到id。