一、项目介绍
dep-analyze-cli是一个命令行工具，用于分析使用nodejs开发的前后端项目依赖关系并且可以启动一个本地服务器，使用前端渲染库D3可视化来展示依赖关系图。
项目服务地址：
www.npmjs.com/package/dep…（在npm官网上）
项目地址：
二、项目分工
好的团队协作可以酌情加分哟～请组长和组员做好项目分工与监督。
| 团队成员 | 主要贡献 |
|---|---|
| 李鸿，付建飞 | 负责用户页面展示 |
| 赵永康，王天乐 | 负责对package的依赖关系进行分析整理 |
| 迟占斌，郭佳琪 | 负责对前后端项目进行代码测试 |
三、项目实现
3.1前端主要难点分析
- ****节点定位到中心与图像平移缩放 将节点定位到中心需计算出点到图像中心的x, y方向上的距离，然后使用将距离设置到整个图像transform属性，而图像的平移缩放需使用到d3的自定义的zoom事件，需要将ZoomEvent中的transform属性直接赋值给图像的transform属性。但实际中开发中发现，在进行缩放平移之后，将查询的节点定位到图像中心，改变了平移缩放的数据，但是再次将图像平移缩放时，ZoomEvent并不依据设置中心时的新的transform数据，而是采用定位到图像中心之前旧的transform数据，这就导致图像突然回到之前的缩放状态和位置，产生严重的跳跃突变的感觉。
解决方法：
在反复查看d3-zoom的文档，甚至源代码之后，发现通过鼠标平移缩放改变的是ZoomEvent的transform属性，单独设置图像的transform属性不会改变ZoomEvent的transform属性，再次查看文档和源代码，鼠标事件平移缩放保存在图像的__zoom属性上，而ZoomEvent事件中的transform正是通过__zoom属性计算的，所以在将节点定位到中心时，手动更新 __zoom就能解决问题。
- 提升图像的交互体验
为了使操作过程中图像有更好的交互效果，需要对依赖图中的节点图像进行改变填充颜色和图像半径大小，对边进行颜色高亮的操作，因此需要频繁查找和操作svg图像中的节点，为了提升效率，需要结合d3的select()方法，给每一个节点都添加id属性，以唯一标识每个节点，因为需要更方便地通过节点名称和版本号查询节点，使用了这两个属性来设置id。 例如 @types/axios&1.2.3，需使用正则表达式，去除特殊字符，最终使用typesaxios123作为id。
3.2后端主要难点分析
-
众多依赖的版本号是否规范是本项目健壮运行的关键，但由于npm依赖安装方式的多样性和npm包开发者对语义化版本号不彻底遵循，导致本项目无法解析所有的npm依赖包的版本号格式，只能通过semver包解析规范的语义化版本号和一些妥协的手段保证项目的运行。
-
图的深度优先遍历是在已经有图的实例的情况下进行的操作，而在本项目只能通过构建扩展图与深度遍历同时并举的方式进行，这会使得求图的深度和正确构建扩展图的操作更加细粒度。
-
可以通过设置节点的访问标志解决循环依赖造成的死循环问题，但难以辨别重复访问一个节点是循环依赖导致的还是多个节点依赖相同节点导致的，因而如果辨别循环依赖是一个难点，本项目通过一个栈保存每个节点到入口节点的访问路径，如果下一个访问节点在栈中，那就表示是循环依赖导致的重复访问一个节点。
四、测试结果
4.1 测试结果
本项目主要使用vitest进行测试
本项目为前后端分离，于是分别对前端和后端进行了功能测试
4.2 前端
-
接口测试
-
接入了msw生成mock模拟数据处理请求
-
主要测试了请求是否正确发出以及请求是否得到正确的响应
-
组件测试
渲染正确性：验证组件在不同状态下是否正确地渲染出预期的UI元素和样式。
交互行为：测试组件的交互行为是否符合预期，例如点击、拖拽、输入等操作是否能够正确触发相应的事件和状态变化。
数据处理：测试组件对输入数据的处理是否正确，包括数据的验证、转换、过滤等。
4.3 后端测试
-
获得依赖列表功能测试
对readModuleDependencies(读取modules依赖功能),getLocalDepConfObj(获取本地依赖),getGlobalDepConfObj(获取全局依赖),getDepPkgVerList(获取依赖全称包名加版本号功能)等功能进行测试，测试其是否得到正确结果
-
依赖分析处理功能测试
对DepAnalyze类的getDepth(获取深度),hasCircleDep(循环依赖分析),hasMulPack(多依赖分析),getDepList(获取依赖列表),toObject,toSimpleObject等属性进行测试，测试其是否得到正确结果
测试保存json文件功能是否能正确执行
-
版本分析功能测试
对analyseVersion(分析并得出正确版本号)，isEqualVersion(版本是否相同)功能进行测试，测试其是否得到正确结果
-
图结构生成功能测试
对GraphByAdjacencyList类的addNode(添加节点),addEdge(添加边),getNeighbors等功能进行功能功能测试，测试其是否得到正确结果
-
Server启动测试
对后端server的启动监听是否正常开启进行测试
五、项目总结与反思
Npm-package分析工具目前已经将项目要求的功能全部实现，暂未出现问题。
不过我们还有一些有待优化提高的地方，前端优化方向有：1.在鼠标右键添加节点标记等功能，方便用户分析2.连线箭头三角形与节点距离根据节点大小自动适配(暂时想不到兼顾效率的解决方法)；后端优化方向有：1.对非语义化版本号和不规范版本号的进一步分析适配，增强程序的健壮性和分析渲染的准确度。2.利用缓存机制进一步提高依赖关系的分析速度。为了解决单体应用架构的问题，我们可能会模块化架构演进，将npm依赖包分析工具拆分为多个模块，每个模块负责一个特定的功能。这样可以提高代码的可维护性和可扩展性，不同的模块可以独立开发和部署。
这个项目我们小小天才队大致花了一个月的时间，来完成这个项目并且在部分需求方面也做出了不错的优化，从项目分工到攻克难点再到最后的项目完结的各种调试，各个小组成员都付出了很多的时间和精力，尤其是各个小组的小组长的付出最多，都为我们小队的项目开发发挥着不可或缺的作用，正是这种团结一致和奋发向上的劲头让我们完成了这个npm-package分析工具的项目，值得反思的地方是我作为小队长，在前期的开发工作中，我并未分出足够的时间和精力陪同你们一起去解决问题，我感到十分抱歉，何其荣幸，我能幸运的遇上你们，希望我们小队以后还有机会可以多多交流去解决项目上的技术难题，在我们的专业技术上精益求精，共同成长。
