阅读源码之前当然是先准备好阅读环境了。React 经过这么多年的发展,代码仓库已经非常庞大,安装依赖也有些麻烦,因此独立出一篇记录准备环境中遇到的问题,以及我们需要使用哪些工具。

下载代码

React 源代码托管在 Github 上,通过如下命令可以将源代码下载到本地。

git clone git@github.com:facebook/react.git
1

鉴于目前的网络环境,访问 Github 不是很友好,我们可以稍稍优化下,减少代码下载时间。

git clone git@github.com:facebook/react.git --depth=1
1

由于我们要基于 v16.13.1 版本的代码,因此我们是全量下载代码。

安装依赖

下载完成之后,我们需要安装项目的依赖,在安装过程中,我们碰到了几个问题,记录如下。

首先在代码更目录执行:

yarn
1

安装依赖,在安装过程中,报了一个错误:

error /Users/xxx/workspace/open-source/react/node_modules/gifsicle: Command failed.
Exit code: 1
Command: node lib/install.js
Arguments:
Directory: /Users/xxx/workspace/open-source/react/node_modules/gifsicle
Output:
⚠ connect ECONNREFUSED 0.0.0.0:443
  ⚠ gifsicle pre-build test failed
  ℹ compiling from source
  ✖ Error: Command failed: /bin/sh -c autoreconf -ivf
/bin/sh: autoreconf: command not found
1
2
3
4
5
6
7
8
9
10
11

是因为 React 的依赖包中依赖了 autoconf 这个包,我们使用 Homebrew 来安装。

brew install autoconf automake libtool
1

默认情况下,Homebrew 会先执行更新,这是一项非常耗时的操作,我们可以通过设置环境变量 HOMEBREW_NO_AUTO_UPDATE=1 来禁用更新。可以将这个环境变量写入 ~/.bashrc 中,每次执行 Homebrew 都生效:

export HOMEBREW_NO_AUTO_UPDATE=1
1

或者在命令行使用,单次生效:

HOMEBREW_NO_AUTO_UPDATE=1 brew install autoconf automake libtool
1

Homebrew 安装完成后,重新执行 yarn 命令,过了一段时间,提示 electron 安装超时。我们可以通过在 ~/.npmrc 中添加如下配置(注意最后的 '/'):

electron_mirror=https://npm.taobao.org/mirrors/electron/
1

将 electron 的镜像源设置为淘宝的站点,来加速下载。

阅读工具

工欲善其事必先利其器,没有一个好的工具怎么能提高阅读代码的效率呢?

作为一个前端开发人员,VSCode 是一个不错的选择。

使用 VSCode 打开代码以后,会发现每个代码文件都提示很多语法错误。原因是 React 代码中使用 Flowopen in new window 来声明类型,VSCode 中 TS 引擎默认会对 JS 进行语法检查,因此会提示在 JS 文件中不能声明类型,需要将文件重命名为 TS 文件。

这当然属于误报,我们需要在设置中关闭 JS 检查。CMD + , 打开设置页面,输入 javascript.validate,去勾选查出来的第一项即可。

同时我们也建议安装下 Flow Language Supportopen in new window 这个插件,可以提供对 Flow 提供很好的支持。

在解决完满屏的红色错误提示以后,我们需要安装 Bookmarksopen in new window 这个插件,有了它,我们可以在任意代码打一个标签,然后在任意时间点通过这个标签返回到这段代码,避免在庞大的代码仓库中迷路。

关注微信公众号,获取最新推送~