1. 下载源码
看源码的第一步就要不客气地把项目clone下来，React的Github地址：https://github.com/facebook/react
2. 安装依赖
clone下来后，在项目根目录运行 npm install安装依赖模块（注意，React要求node版本>=4，npm版本>=2）
安装成功后，可以运行npm build构建出react相关的JS文件，运行npm test来测试React的所有单元测试是否通过（注意：React是用Grunt作为主要的构建工具，所以如果没有grunt命令工具则需要通过运行npm install -g grunt-cli来安装）
安装过程遇到问题，请仔细阅读README.md的Prerequisites
3. 调试
在该项目中可通过跑源码中的单元测试来对源码进行debug
方式一: 通过console.log
这种方式运行速度快，但无法通过设断点的方式一步一步检查，适合修改源码
运行
npm install jest-cli -g安装Jest命令行单元测试工具
然后就可以利用Jest工具来运行某一个单元测试
用IDE打开ReactClass-test.js，假装修改源码：
然后运行以下命令，看下是否有输出期望的信息：
jest src/isomorphic/classic/class/__tests__/ReactClass-test.js
方式二：设置断点 - WebStorm
这种方式运行速度慢，但可以一步一步地检查，适合调试源码
这里介绍如何用WebStorm，通过单元测试来debug React的源码，如下图所示新建一个Node.js的配置
Paste_Image.png
参数介绍：
**Node interpreter: **指定node的安装路径，这里需要使用>=4版本的node
**Node parameters: **node的运行参数，这里指定--harmony，意思是启用一些已基本完成但未被V8小组认为是稳定的特性(Staged features)
**Working directory: **项目工作目录，这里指定React的源码目录
**Javascript file: **运行的JS脚本文件，这里指定jest.js文件
**Application parameters: **给执行脚本的参数。--runInBand，意思是将所有单元测试一个接一个地在当前进程执行，而不是另开工作子进程来并发执行，主要用于调试场景。--runInBand后面紧跟单元测试文件，这样可指定运行某个单元测试
方式三：设置断点 - Node Inspector
这种方式的优缺点同方式二基本一样
运行
npm install -g node-inspector安装命令行工具
然后就可以在项目根目录路径通过node-debug工具来运行某一个单元测试，如下：
node-debug --nodejs --harmony ./node_modules/jest/bin/jest.js --runInBand ./src/isomorphic/classic/class/__tests__/ReactClass-test.js
--nodejs的意思将NodeJS的运行时参数传给调试进程，这里是将--harmony参数传给Node进程
接下来就可以踏上React的窥探之路了，保佑你。。。
-- THE END --
网友评论