某些老项目的Vue单文件行数过多,方法和逻辑很多,因而阅读起来很麻烦,所以很多方法的调用很难快速地理清楚;
想知道某个方法在哪些地方被调用,或在哪个调用链上会被触发,这就有点类似Chrome调试工具中查看函数的调用栈;
- 使用@vuedx/analyze包可以快速得到Vue文件的script部分以及标识符的位置等信息
- 使用acorn作为JS AST parser得到script部分的AST信息;
- 使用acorn-walk来遍历AST结构,提取methods声明的方法以及methods方法调用栈信息(静态);
- 可使用echarts来可视化所有可能的调用关系图;
- 也可以输出一份bottom-up(自底向上) call tree信息,简洁明了;
- vscode插件化;
- call tree折叠查看;
- 点击函数名可以跳到相应的源码位置(@vuedx/analyze分析结果有);