前言
鹅厂裸辞一年后，机缘巧合，遇到大佬把我带到了蚂蚁。 在种满了西湖龙井的茶山旁边，畅聊了项目的规划，也希望我尽快熟悉项目。 整体来说有一定挑战，但我喜欢挑战。
而常言道，工欲善其事，必先利其器。 于是我顺手就准备给 XMouse 来个更新。 （XMouse 是我之前开发的 VSCode 插件）
开干
按行规，看项目，首先看目录。 而对于常规树形结构来讲，文件一多，层次一深，就不太好看。 目录折叠起来，太过于简洁，无法总览全局。 目录展开起来，又过于繁杂，不便记忆。
而有没有办法能全都要呢？ 当然可以，我想，我们可以把树形目录，可视化为思维导图的形式。 用一张图，直观的去看到所有目录和所有文件，直观的去看这些文件组织成了多少模块。
那怎么实现呢？似乎很简单：nodejs的fs模块遍历一下文件，然后找个可视化库就完事。 于是花了一天简单搞了下，用vue源码跑了跑如下，似乎还可以：
前言
鹅厂裸辞一年后，机缘巧合，遇到大佬把我带到了蚂蚁。 在种满了西湖龙井的茶山旁边，畅聊了项目的规划，也希望我尽快熟悉项目。 整体来说有一定挑战，但我喜欢挑战。
而常言道，工欲善其事，必先利其器。 于是我顺手就准备给 XMouse 来个更新。 （XMouse 是我之前开发的 VSCode 插件）
开干
按行规，看项目，首先看目录。 而对于常规树形结构来讲，文件一多，层次一深，就不太好看。 目录折叠起来，太过于简洁，无法总览全局。 目录展开起来，又过于繁杂，不便记忆。
而有没有办法能全都要呢？ 当然可以，我想，我们可以把树形目录，可视化为思维导图的形式。 用一张图，直观的去看到所有目录和所有文件，直观的去看这些文件组织成了多少模块。
那怎么实现呢？似乎很简单：nodejs的fs模块遍历一下文件，然后找个可视化库就完事。 于是花了一天简单搞了下，用vue源码跑了跑如下，似乎还可以：
细致看一看，从根目录（左下角的WorkSpace）这里出发，顺藤摸瓜也可以大致看到packages中分布了一些势均力敌的模块，比如compiler-core、compiler-sfc、compiler-ssr、compiler-dom、server-render、runtime-core、reactivity等。
但我发现似乎差了点什么。 文件与文件的关系，似乎不仅仅只是目录。 对，就是差了依赖。
于是我又玩了下AST来解析import以及export，把文件关系可视化出来。
虽然看不懂，但突然感觉单调的目录结构，炫酷起来了。
不过这玩意有啥用呢？ 硬要说，可以通过依赖看出模块与模块内聚性、耦合性。 可以看出vue项目架构非常符合高内聚低耦合，很干净。 不难想象一些shi山的场景。
然后我又思考了一下，我看依赖干嘛？ 我想了想领导安排了我三件事，一是攻坚技术难点，二是搞业务需求，三是搞技术重构。
对于技术重构，我需要明确耦合关系，合理解耦，上面这张图可以让我快速了解陌生项目哪些是比较恶心的东方。 对于业务需求，最怕的就是历史逻辑带来的背刺。 我需要明确文件依赖，判断影响范围。
于是呼之欲出的便是再来一个简单的功能：得展示某个文件的依赖。
让我们看看runtime-dom里vshow.ts的源码(图中红点)举例。
当我不熟悉vue3源码，却要改代码时。 我就可以简单的了解我直接影响了三个文件（图中黄点）， 间接影响了一堆文件（图中蓝点）。 （PS：我以红黄蓝绿的顺序表达依赖的递减）
在搞定这俩功能之后，花了两周时间体验，感觉确实有点意思。 甚至预料之外的收获。
在我写周报时，我还灵机一动直接拿这张图做汇报，直观的表达自己看懂了哪些，还没看懂哪些。 比如说我看懂了下图红框的几个模块：
紧接着，我们团队引来了新人，也需要快速熟悉项目。 我一想，这不巧了吗，正好可以一起来玩玩 XMouse。
经过简单演示后，我意识到这个其实还可以作为项目readme。 只需要再加个在目录图上打标识的小功能，就可以一代传一代沉淀下去。 帮助新人尽快理解项目。
最后
项目已开源丢到git上，欢迎star。 也发布到了vscode商店，欢迎大家食用。 同时我也建了一个XMouse讨论的绿泡泡群，欢迎勾搭。 不仅聊XMouse，也聊技术。
相关链接以及进群方式我打包丢我博客里了。 欢迎来我博客玩：dustycoder.tech/ （移动端适配还没搞，后续空了不上，还请担待。）
我是尘码，祝你早安午安晚安。
