# zhufeng_debugger_react_202009

**Repository Path**: killsos/zhufeng_debugger_react_202009

## Basic Information

- **Project Name**: zhufeng_debugger_react_202009
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2020-09-29
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 1.创建项目
```js
create-react-app zhufeng_debugger_react_202009
cd zhufeng_debugger_react_202009
npm run eject
```

## 2.下载相应版本react源码
- 目前`create-react-app`生成的项目是 [v16.13.1](https://gitee.com/mirrors/react/tree/v16.13.1/)
- 在此下载v16.13.1压缩包 [releases](https://gitee.com/mirrors/react/releases)

## 3. 拷贝至项目
- 把下载后压缩包进行解压,把`react`目录连同目录本身拷贝到`src`目录下面
- 注意是`react`目录而非`react`目录下面的文件

![copyToProject.png](https://img.zhufengpeixun.com/copyToProject.png)

## 4. 更改webpack.config.js
- 修改 `config\webpack.config.js`
- 设置别名
```diff
      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'),
+        'legacy-events': path.resolve(__dirname, '../src/react/packages/legacy-events'),
+        'shared': path.resolve(__dirname, '../src/react/packages/shared'),
+        'react-reconciler': path.resolve(__dirname, '../src/react/packages/react-reconciler'),
      },
```

## 5. 忽略flow
- 由于react的源码中采用了flow做类型检查， 所以我们需要安装`@babel/plugin-transform-flow-strip-types`这个插件忽略类型检测

```js
cnpm install @babel/plugin-transform-flow-strip-types -D
```

```diff
    {
      test: /\.(js|mjs|jsx|ts|tsx)$/,
      include: paths.appSrc,
      loader: require.resolve('babel-loader'),
      options: {
        customize: require.resolve(
          'babel-preset-react-app/webpack-overrides'
        ),
        plugins: [
          [
            require.resolve('babel-plugin-named-asset-import'),
            {
              loaderMap: {
                svg: {
                  ReactComponent:
                    '@svgr/webpack?-svgo,+titleProp,+ref![path]',
                },
              },
            },
          ],
+          [require.resolve('@babel/plugin-transform-flow-strip-types')]
        ],
        // This is a feature of `babel-loader` for webpack (not Babel itself).
        // It enables caching results in ./node_modules/.cache/babel-loader/
        // directory for faster rebuilds.
        cacheDirectory: true,
        // See #6846 for context on why cacheCompression is disabled
        cacheCompression: false,
        compact: isEnvProduction,
      },
    },
```

## 6. 配置HostConfig
- 修改`src\react\packages\react-reconciler\src\ReactFiberHostConfig.js`
- 根据环境去导出`HostConfig`

```diff
-//invariant(false, 'This module must be shimmed by a specific renderer.');
+export * from './forks/ReactFiberHostConfig.dom';

```

## 7. 修改全局变量报错
- 修改 `config\env.js`
- 增加环境变量

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

## 8. 修改ReactSharedInternals.js
- 修改文件 `src/react/packages/shared/ReactSharedInternals.js`

```diff
-//const ReactSharedInternals =
  React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;

+import ReactSharedInternals from '../react/src/ReactSharedInternals';
```

## 9. 修改invariant.js
- 修改文件 `src/react/packages/shared/invariant.js`

```diff
export default function invariant(condition, format, a, b, c, d, e, f) {
+  if(condition) return ;
  throw new Error(
    'Internal React error: invariant() is meant to be replaced at compile ' +
      'time. There is no runtime version.',
  );
}
```

## 10. 开始调试
- 编写入口文件,加上debugger开始调试

src\index.js
```js
import * as  React from 'react';
import * as ReactDOM from 'react-dom';
debugger
ReactDOM.render(
  <h1>hello</h1>,
  document.getElementById('root')
);
```

![startDebugger.png](https://img.zhufengpeixun.com/startDebugger.png)