react 源码调试环境搭建

参考

1. 如何本地 Debug React 源码
2. 新版React如何调试源码
3. 搭建react源码调试环境

下载 react 源码

## clone
git clone https://github.com/facebook/react

# 查询分支
git branch -r

# checkout想要的版本号
git checkout ${version} 

因为 react 源码涉及 react-native 部分，而react-native 相关源码依赖 java 环境，所以需要安装 jdk。

安装 jdk

到 下载地址 下载并安装

m1 芯片的选择ARM64架构的DMG安装包进行下载。

配置环境变量

export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk-版本号.jdk/Contents/Home
export PATH=$PATH:$JAVA_HOME/bin

复制到 ~/.bashrc 或者 ~/.zshrc 文件里

打开文件

open ~/.bashrc
open ~/.zshrc

更新文件

source ~/.bashrc
source ~/.zshrc

给 react 源码安装依赖

yarn

修改配置 sourcemap 配置

在 /scripts/rollup/build.js 文件中

把一些不会生成 sourcemap 的插件注释，否则会报错

构建

React 使用 yarn workspace 进行多项目管理，由于测试项目为web 项目，只需编译React和React-Dom。

yarn build react/index,react/jsx,react-dom/index,scheduler --type=NODE

生成全局软连接

# 全局软连接 react
cd ./build/node_modules/react 
yarn link

# 全局软连接 react-dom
cd ./build/node_modules/react-dom
yarn link

快速创建一个 react 项目

# create project 
npx create-react-app react-client

# 进入项目目录
cd react-client

# 在当前项目进行连接
yarn link react react-dom

# 启动
yarn start

可以开始愉快地调试咯