README-zh-CN.md

English | 简体中文

📝简介

一个用来查看项目文件依赖的VsCode插件。

🔥 功能

• 查看文件依赖 根据入口文件分析项目文件依赖关系，生成文件依赖树。
• 保存依赖关系 将项目文件的依赖关系以文件的方式保存在项目本地。
• 导出依赖关系 可将页面中的依赖关系图以png或svg格式导出至本地。
• 提取文件基本信息 提取文件类型、行数、简介、详情等基本信息给予展示。
• 提取核心方法 提取代码文件中的方法及注释并在详情中给予展示。

⚙️ 安装

扩展市场

在扩展市场搜索dependencygraph，下载如图所示的插件即可。

离线安装

下载.vsix文件

使用.vsix文件离线安装插件

🚀 使用

设置入口文件

可在画板中通过GUI的方式设置。

可在设置文件中通过配置属性的方式设置(设置文件路径为.dependencygraph/setting.json)。

设置路径别名及被解析文件

可在画板中通过GUI的方式设置。

解析文件类型以,分割直接往后累加即可。路径别名手动添加后注意要确认。

可在设置文件中通过配置属性的方式设置(设置文件路径为.dependencygraph/setting.json)。

解析文件类型为一个数组，可直接添加，路径别名为一个对象以key value的形式做映射。

设置文件简介及描述

文件简介及注释以一下方式在文件中书写，即可被插件识别。

/**
 * @introduction 这里是文件简介
 *
 * @description 这里是文件描述\n 之后的字符会在下一行展示
 */

📝 已支持的文件

文件类型	.js	.ts	.jsx	.tsx	.vue	.scss	.less	.sass	.py	.php	.go
支持状态	✅	✅	✅	✅	✅	✅	✅	✅

📡 工作原理

1. 将入口文件以文本方式读取，以正则表达式的方式获取其简介和描述.。
2. 将代码文件基于babel parser解析为AST,分析AST获取import和require的参数，将其值作为该文件的依赖项。
3. 根据import和require的参数和当前文件的绝对路径基于enhanced-resolve获取依赖文件的绝对路径。将被依赖文件压入待分析队列。
4. 分析整个队列获取完整依赖树。

🌌 目标

最终视图形成类似于visual studio class view的分析页面,帮助开发者查看和分析文件依赖和模块关系。

🔧 开发

yarn install

安装必要的依赖。

yarn watch

监听文件变化，并编译文件。

F5

以vscode打开该项目按下F5来启动调试程序。test

🚦 测试

yarn test

可以在tests下来找到测试用例，以yarn test指令来执行。

⭐️ 支持

如果该项目有帮到你请点击右上角的start来支持开发者。

👏 贡献

如果有任何问题或者功能请求, 请在此issue填写，或直接对该项目提交Pull Request。

🐞 问题反馈

如果发现BUG或其他任何问题，可直接在Github上提交Issue。