通过webpack的配置来调试React17的源码

最近在学习React17的源码，学习源码的时候肯定是边调试边看最好，于是就在网上找了源码的调试方法，网上有两种方式可以实现源码的调试：

第一种：

1、去React的gitHub上面把相应的源码clone下来

2、通过yarn安装依赖（这个过程中会出现很多问题）

3、安装完依赖之后就可以通过以下命令生产软连接

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

cd build/node_modules/react
yarn link
cd build/node_modules/react-dom
yarn link

4、把生成好的软连接link到对应的调试项目中。

因为我在步骤2中遇到很多问题，解决了很久没有解决，所以我就放弃了该方式。采用了第二种方式。

第二种：

利用webpack来实现。

1、通过yarn eject命令暴露出webpack的配置

2、然后在webpack.config.js中修改配置文件

　　a、注释ESLintPlugin

　　b、在alias中引用以下包：　

 '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'),
 'react-events': path.resolve(__dirname, '../src/react/packages/events')

　　c、在config的env.js中增加以下变量：

const stringified = {
    // 新增的调试属性
    __DEV__: true,
    __PROFILE__: true,
    __UMD__: true,
    __EXPERIMENTAL__: true,
    //
    'process.env': Object.keys(raw).reduce((env, key) => {
      env[key] = JSON.stringify(raw[key]);
      return env;
    }, {}),
  };

　　d、在根目录下新建.eslintrc.json文件，内容为

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

　　e、react目录下的.eslintrc.js也需要修改

---// extends: ['fbjs', 'prettier'],
+++  extends: [],

　　f、shared目录下的invariant.js修改

---// if (condition) { return; }
++ return

　　g、share目录下的ReactSharedInternals.js修改：

// const ReactSharedInternals =
//   React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
import ReactSharedInternals from '../react/src/ReactSharedInternals'

　　h、src目录下的index.js修改

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

　　完成以上操作就可以调试React17的源码了。