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的配置
参数介绍:
**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 --