React源码调试环境搭建

这些年前端领域React越来越受欢迎，越来越多的网页都是用React搭建的，前不久看了一节课介绍如何直接在工程里引入React源码用于直接调试觉得非常方便因此自己写一遍文章记录下。

工程创建

首先我们先创建一个react工程，这个方法很简单了，参考官网方式，命令行搞定

npm create-react-app my-app

源码下载

这里以reactv18.2.0版本，进入工程之后，在工程src目录下新建一个react目录，然后git clone下对应react源码

git clone git@github.com:facebook/react.git --depth 1 --branch v18.2.0

修改webpack配置

首尔eject出webpack配置，这一步简单说就是将工程本身的一些默认隐藏配置项全部暴露出来，提供我们修改为了把工程直接链上react源码做准备

npm run eject

eject之后我们会发现工程里多了很多文件，package.json文件也有了很大变化，之后我们打开被我们eject出来的webpack配置文件，位置在config/webpack.config.js并修改里面的alias，将工程里默认使用的react改到我们下载的源码里

alias: {
        'react': path.resolve(__dirname, '../src/react/packages/react'),
        'react-dom': path.resolve(__dirname, '../src/react/packages/react-dom'),
        'react-reconciler': path.resolve(__dirname, '../src/react/packages/react-reconciler'),
        'react-dom-binding': path.resolve(__dirname, '../src/react/packages/react-dom-binding'),
        'scheduler': path.resolve(__dirname, '../src/react/packages/scheduler'),
        'shared': path.resolve(__dirname, '../src/react/packages/shared'),
      },

然后我们需要添加原始变量，在config/env.js文件里添加如下三个原始变量，放在stringified数据里

__PROFILE__:true,
__UMD__:true,
__EXPERIMENTAL__:true,

编译错误修改

在修改完上面的配置之后我们启动工程会发现很多报错如下图，一一修改即可

第一个报错把src/index.js的引用修改成如下方式接口

import * as React from 'react';
import * as ReactDOM from 'react-dom/client';

第二步提示的Scheduler找不到变量，根据源码里的注释我们可以发现真实是用不上的，因此直接改成空方法

export const unstable_yieldValue = () => {};
export const unstable_setDisableYieldValue = () => {};

第三步的错误提示的是eslint相关的，我们直接在项目根目录加个.env文件，里面禁用掉eslint

DISABLE_ESLINT_PLUGIN=true

此时我们已经解决提示的编译报错，这个时候继续启动，却发现白屏，打开控制台看还有其他问题

上面提示的代表一个变量找不到了，我们定位到这行代码，改成手动引入这个变量

import ReactSharedInternals from '../react/src/ReactSharedInternals'

之后报了

这个提示的是我们需要指定我们运行的代码的平台，我们这里假设运行在网页dom上，因此对应的ReactFiberHostConfig改成

export * from './forks/ReactFiberHostConfig.dom'

接下去我们就看到基于源码编译的前端页面正常启动了。

结语