React17系列(1)-如何本地调试源码

1、 创建项目，运行npx create-react-app debug-react ，这里使用react版本为17.0.2

2、在src目录下克隆react源码，安装依赖

git clone https://github.com/facebook/react.git -b 17.0.2

3、执行eject命令，将webpack、babel等配置暴漏在config目录下

4、修改config/webpack.config.js文件如下：

resolve: {
  // ...
  alias: {
        // Support React Native Web
        // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
        'react-native': 'react-native-web',
        // Allows for better profiling with ReactDevTools
        ...(isEnvProductionProfile && {
          'react-dom$': 'react-dom/profiling',
          'scheduler/tracing': 'scheduler/tracing-profiling',
        }),
        ...(modules.webpackAliases || {}),
       +react: path.resolve(__dirname, '../src/react/packages/react'),
       +'react-dom': path.resolve(__dirname, '../src/react/packages/react-dom'),
       +shared: path.resolve(__dirname, '../src/react/packages/shared'),
       + 'react-reconciler': path.resolve(
       +   __dirname,
       +   '../src/react/packages/react-reconciler'
       + ),
      },
}

webpack中resolve的作用是配置模块如何解析，其中resolve.alias用来创建import或require的别名，这里将主要用到的几个包链接到刚才git clone的react目录下

5、修改环境变量config/evn.js

const stringified = {
  + __DEV__: true,
  + __PROFILE__: true,
  + __UMD__: true,
  + __EXPERIMENTAL__: true,
  + __VARIANT__: true,
    "process.env": Object.keys(raw).reduce((env, key) => {
      env[key] = JSON.stringify(raw[key]);
      return env;
    }, {}),
  };

为了方便本地调试，需要将这些环境变量打开

6、在debug-react根目录下创建.eslintrc.json文件

{
  "extends": "react-app",
  "globals": {
    "__DEV__": true,
    "__PROFILE__": true,
    "__UMD__": true,
    "__EXPERIMENTAL__": true,
    "__VARIANT__": true
  }
}
​

此时已经基本完成各种配置，但是yarn start启动项目时，会遇到一系列的报错，几乎遇到的问题都可以直接在网上搜索解决方案，因为每个人的配置情况不同，遇到的报错也是各种各样，所以这里就不再记录，分享下本人调试成功借鉴的资料：

zhuanlan.zhihu.com/p/336794903

同时需要注意，如果使用的电脑是max m1，第二步安装依赖时会遇到如下报错：

Response code 404 (Not Found) for https://github.com/electron/electron/releases/download/v9.4.4/electron-v9.4.4-darwin-arm64.zip

解决方案：package.json中配置resolutions

"resolutions": {
  "electron": "^11.0.1"
}

安装react18时不会出现如上问题，但这次主要调试react17版本，所以建议大家使用windows电脑

总结

至此，调试环境就搭建完成了，可以通过debugger方式在react源码中进行调试，建议大家手动操作一遍，遇到的问题欢迎留言