我是怎么快速阅读前端包源码？

在我们开发的过程中，都会使用第三方库出现问题需要快速修复，都需要阅读源码，而时间可能是比较紧急的，那平时如何养成快速的阅读源码的能力，就是我们的必修课了，而经常阅读优秀的源码，我们的水平和思想也会有明显的提升

这里我简单介绍一下我的思路，这里以前端的包为例子

​

背景和理念

在准备看代码之前，对文档网站（或者README.md）先过一遍

​

• 这个库解决了什么问题？

• 解决相同问题的库都有哪些？

• 如果有解决相同问题的库，为什么还要另做这一个？他们之间有什么区别

• 这个库的理念是什么？

• 有什么功能、配置？

• 了解项目怎么跑起来

做到心里有数，有些库甚至会将架构也放到文档里，然后了解整个文件结构，通过package.json

• scripts有哪些脚本

• 依赖了哪些库

一般可能是webpack、rollup、vite，typescript等打包工具配置的，都会有入口和出口文件

​

确定方向

看完背景和理念，就可以开始针对某个功能，确定方向了，带着问题去debugger，你需要解决什么问题，这个问题可能是由哪些功能影响的，或者你需要了解什么功能

阅读

有了方向就可以开始查看代码，这时候，如果是比较老的项目，我建议是下载最新的，除非刚开始没多久，那可以从第一个commit开始看，一般会从入口文件开始看，先了解下整个项目的架构，迅速找到模块的文件，开始了解，有些读不懂的也可以先跳过，打上标记，知道是做什么用的就行了，如果你觉得一些实现的很巧妙也可以记录下来，当粗略读完的时候，就可以开始尝试打断点一下不懂的地方，逐步了解

如果有测试用例，也可以查看测试用例，可以快速了解函数的输入和输出、以及使用边界

建议

• 多数项目都可以搭配 Vscode 的调试查看代码，调试的时候查看也是非常的方便

• 将实现巧妙的片段记录下来，多想想为什么会这么实现，有其他的方案

• 了解不同项目的流程是有哪一些

• 可以搭配往上的阅读源码系列的文章一起看，顺便记录下看过的资源

​

如果没有什么目标，可以先从工作当中使用的库，从小型的库开始阅读，比如某个UI组件也可以

​

最后

有时候大型项目的源码的阅读不是一次就能够读完的，最好还是有笔记记录一下，而阅读后解决了问题，或者能够说出功能实现思路，并且能实现它，我觉得这次阅读源码就是成功了，就是有意义的，并且尝试用费曼学习法，去给别人输出出来（无论是口述、文章等），输出的过程中可能也会发现自身有一些点有遗漏，再去补充即可