# react-source-debug

**Repository Path**: zhongjiaming/react-source-debug

## Basic Information

- **Project Name**: react-source-debug
- **Description**: react源码调试环境，里面有一个配置好的react版本，如果要切换版本，需要在新源码上修改三个文件，参考readme
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2020-10-06
- **Last Updated**: 2021-04-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

**运行步骤** 
* 克隆项目到本地
* yarn安装依赖
* yarn start启动项目

**源码版本**  
* 源码为17.0.0-alpha.0;

**自己搭建**  
* 用create-react-app创建项目并eject配置文件出来；
* 修改env.js
```js
  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,
  };
```
* 修改webpack.config.js
```js
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'),
  },
```
```js
// 安装并在test: /\.(js|mjs|jsx|ts|tsx)$/,添加flow转换插件
[require.resolve('@babel/plugin-transform-flow-strip-types')]

```
* 把源码拷贝到src目录下

* 修改.../packages/react-reconciler/src/ReactFiberHostConfig.js
```js
import invariant from 'shared/invariant';
export * from './forks/ReactFiberHostConfig.dom';
// We expect that our Rollup, Jest, and Flow configurations
// always shim this module with the corresponding host config
// (either provided by a renderer, or a generic shim for npm).
//
// We should never resolve to this file, but it exists to make
// sure that if we *do* accidentally break the configuration,
// the failure isn't silent.

invariant(true, 'This module must be shimmed by a specific renderer.');

```
* 修改.../packages/shared/ReactSharedInternals.js
```js
// import * as React from 'react';
// const ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
import ReactSharedInternals from '../react/src/ReactSharedInternals';
export default ReactSharedInternals;
```
* 修改.../packages/shared/invariant.js
```js
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.',
  );
}
```
总结：  
1、 用create-react-app创建项目并eject配置；  
2、 修改两个文件
  * config/env.js, 
  * config/webpack.config.js；  
  
3、 拷贝react源码到src目录下；  
4、 修改react源码三个文件，分别是  
  * packages/react-reconciler/ReactFiberHostConfig,
  * packages/shared/ReactSharedInternals,
  * packages/shared/invariant