目前网上有很多文章，比如XX源代码分析。但是这些文章分析源代码的范围是有限的，有时内容并不是读者最关心的。同时我也注意到，源代码是不断更新的，文章里写的源代码往往是过时的。因为这些问题，很多同学喜欢自己看源代码，自己做，丰衣足食。

本文主要讲的是在阅读React、Vue、Webpack、Babel等大型前端开源项目的源代码时的一些技巧。目的是让大家在遇到需要通过阅读源代码来解决的问题时，更快的定位到自己想看的代码。授人以鱼不如授人以渔。希望你能通过这篇博客了解到大型前端项目源代码阅读时的出发点。以后遇到好奇的问题，可以自己去探究。

问题驱动——不要为了看源代码而看源代码

首先，我们要明确一点。看源代码的目的是什么？

我个人的看法是，看源代码是为了解决问题。开源项目的源代码没有什么特别的，也是常用代码。这些代码的数量级通常相当大。如果你想从源代码中学习一些东西，直接浏览整个代码库无疑是大海捞针。

但是如果你带着疑问去看源代码，比如你想知道React的合成事件系统的原理，React的setState前后发生了什么，或者Webpack插件系统的原理。也有可能是遇到了bug，怀疑是框架/工具的问题。在这种情况下，如果你带着特定的目标去看源代码，你就会被盯上。

看看最新版本的源代码

之前看到一个说法，源代码要从项目第一次提交开始读。如果是为了解决上一篇文章中关于框架/工具的困惑，自然要看当前项目使用的框架/工具的版本。

如果是为了学习源代码，我也建议阅读最新的源代码。因为一个项目是不断迭代和重构的。可能是不同版本之间的完全重写。比如Vue 2.x和React 16。重构导致了代码架构的一些变化。Vue 2.x引入了Vritual DOM，Pull+Push的数据变化检测方式让整个代码结构更加清晰，所以2.x的代码其实比1.x更容易阅读，React 16重写了Reconciler，引入了纤程的概念，整个代码仓库结构更加清晰，更推荐阅读。

前提条件

看源代码，当然不可能是梭子。

在阅读源代码之前，你需要对项目的原理有一个基本的了解。所谓的原则就是，这个项目的组成部分是什么，要经过哪些步骤才能达到最终的产出。在这些工艺中，业内主流的方案有哪些？

比如前端的视图层框架，要渲染UI，组件要经过挂载、渲染等步骤。数据驱动的前端框架，挂载后会进入一个循环，当用户交互触发组件数据变化时会更新UI。其中，数据检测有两种方案:Push和Pull。UI渲染可以是全字符串模板替换，也可以是基于虚拟DOM的差分DOM更新。

比如一些前端工具，比如Webpack和Babel，都是基于插件的。基本的工作流程是读取文件，将代码解析成AST，调用插件转换AST，最后生成代码。要理解Webpack的原理，就要知道Webpack是基于一个叫做tapable的模块化系统。

那么我们是如何知道这一切的呢？要了解这一点，可以去各大网站和博客上的XXX源代码分析系列。通过这些文章，我们可以对我们要看的框架/工具的原理有一个大致的了解。

本地构建
但是最后还是要直接看源代码。作者真正看源代码的第一步是在本地克隆项目的代码仓库。然后根据项目自述文件中的构建指南在本地构建它。

如果是前端框架，我们可以直接用HTML引入本地构建的umd bundle(记得用开发构建，不然代码会被压缩，可读性差)，然后写一个简单的demo，里面会引入本地构建。如果是基于Nodejs的工具，我们可以使用npm link在本地链接这个工具的命令。您还可以直接查看项目的package.json条目文件，并使用node直接运行该文件。

这里需要强调的是，大型开源项目一般都有贡献指南，旨在让想贡献代码的开发者更快上手。有关于如何在本地构建代码的讨论。

以React为例。在React的投稿指南中，有一节是关于开发工作流的。有这样一段话:

尝试您的更改的最简单的方法是运行yarn build core，DOM–type = UMD，然后打开fixtures/packaging/babel-standalone/dev . html。该文件已经使用了build文件夹中的react.development.js，因此它将拾取您的更改。

所以React warehouse中的
fixtures/packaging/Babel-standalone/dev . html是一个方便的演示页面。我们可以在这个页面上快速检查我们对代码的本地更改。

您可以尝试将日志添加到项目的条目文件中，看看是否可以在控制台/终端中看到该日志。如果可以，恭喜你，现在可以随便玩这个项目了！

阐明目录结构

在看具体的代码之前，我们需要整理一下项目的目录结构，这样才能快速知道在哪里可以找到相关函数的代码。

我们来看看React的目录结构。React是一个monorepo。也就是说，一个仓库包含多个子仓库。我们可以在包目录中看到许多单独的包:

React 16之后，React的代码分为三部分:React核心、渲染器和调和器。这是因为React的设计允许我们将负责将数据映射到UI的Reconciler与负责将虚拟DOM渲染到每个终端的Renderer和React Core分开。React Core包含React的类定义和一些顶级API。渲染和视图层差异的大部分逻辑在协调器和渲染器中。

巴别塔也是一个monorepo。巴别塔的核心代码是babel-core，即包。Babel已经开放了接口，这样我们就可以自定义Visitor了，在AST转换的时候会调用。所以Babel的仓库也包含了很多插件，而实际实现语法转换的正是这些插件，而不是babel-core本身。

Vuejs的代码比较典型，核心代码在src目录下，按功能模块划分。因为Vue也支持多平台渲染，所有平台相关的代码都放在平台文件夹里，核心文件夹就是Vue的核心代码。编译器是Vue的模板编译器，将HTML风格的模板编译成渲染函数。

Webpack和Babel一样，可以说是一个基于插件的系统。Webpack的主要源代码在lib目录下，webpack.js是入口文件。

上面提到了四个项目的目录结构，那么当我们遇到一个新的开源项目时，应该如何了解它的目录结构呢？

如果这个项目是monorepo，首先我们必须找到核心包，然后查看里面的代码。

如果不是monorepo，一般来说，如果这个项目是CLI工具，那么命令行界面相关的入口文件都是从bin目录下载的，工具的核心代码在lib或者src下面。如果这个项目是前端视图层框架，目录结构类似于Vue。

作为验证，可以看一下打包工具packaging和前端视图图层库moon的目录结构。目录的结构往往是相似的，看几个项目就熟悉了。

调试器& amp& amp全局搜索解决方案
已经运行了本地构建，知道了目录结构之后，我们就可以开始看源代码了！正如我之前所说，我们必须以问题为导向。我就拿React叫setState前后发生了什么的问题来举例吧。

我们可以在setState的地方做一个断点。首先，我们需要找到setState在哪里。这段时间之前的准备就派上用场了。我们知道react的常用API在React的包下。我们将在该包中进行全局搜索。我们发现这个API是在文件src/ReactBaseClasses.js中定义的

所以我们会在这里设置一个断点:

然后运行本地React build的演示页面，让组件触发setState，我们可以在Devtool中看到断点。

当我们进入调用
this . updater . enqueueSetState时，我们将进入ReactFiberClassComponent函数中的enqueuesetState。这里调用了两个函数，enqueueUpdate和scheduleWork。如果想深入到setstate之后的流程，只需要点进这两个函数就可以看到具体的代码了。

如果我们想知道在setState之前发生了什么，我们只需要查看Devtool右边的调用堆栈:

点击每一帧跳转到相应的功能，恢复当前上下文。

结合一步一步的代码调试，可以看到框架的函数调用栈。对于每一个重要的函数，我们都可以在仓库中搜索源代码进行进一步的研究。

节点工具的调试方法类似。我们可以在运行Node命令时添加–- inspect参数。

单步调试的方法其实大家都知道，但是在哪里破点才是最关键的。在我们熟悉了框架的原理之后，就可以在框架的关键环节上破点了，比如前端视图层框架的声明循环钩子和render方法，节点工具的插件函数。这些代码都是框架运行所必需的，并且是很好的起点。

如果是了解具体问题，你觉得有问题的地方可以直接打断。然后运行源代码，想办法把代码弄到那个地方。我们可以在断点处看到局部变量等信息，有助于定位问题。

来自开发团队的资源

事实上，开源项目的开发团队也致力于让更多的人参与到项目中来，降低项目的门槛。所以我们其实可以在网上找到很多开发团队的资源。这些资源可以帮助我们理解这个项目的原理。

关注核心开发人员

每个项目都有一些核心开发人员，比如React的Dan Abramov、Andrew Clark和Sebastian Markb? ge。狼群的托拜厄斯·科珀斯和肖恩·拉金。威的尤雨溪。我们可以在Twitter上关注他们，了解这个项目。

关注官方博客和演讲视频

如果我们关注以上核心开发人员，会发现他们经常发布与源代码/项目原理相关的博客或视频。

React的官方博客最近有很多和项目开发相关的博客。

Behind the Scenes: Improving the Repository Infrastructure 这篇介绍的是 React 项目仓库的基础设施。Sneak Peek: Beyond React 16

一开始，Andrew写了一篇关于光纤架构的文档。Dan Abramov最近在JSConf中介绍了React的一些新特性——超越React 16。先睹为快:React博客中的《超越React 16》也是这个讲座的介绍。

尤雨溪谈前端框架数据变化检测原理。Vue文档还包含诸如“深度反应”等介绍该原理的章节。

肖恩·拉金的《一切都是插件》！由内而外掌握Webpack介绍web pack的核心组件Tapable。

詹姆斯·凯尔的《如何构建编译器》可以让我们了解巴别塔代码翻译的基本流程。

写在最后

这篇文章的核心观点是，阅读源代码的目的是为了解决问题。我们鼓励你在本地运行大型项目的源代码，放心自己玩自己学。因为源代码也是普通代码，没有太多门槛。唯一的门槛可能来自于开源项目的作者和普通开发者之间的信息不对称，他们对项目的原理和目录结构不够了解。

我们可以从开发者那里获取资源，同时也可以在社区中多阅读一些关于源代码分析的文章，有助于我们了解项目的原理，为后续的源代码分析打下基础。