React 源码调试 (react版本17.0.2)
环境准备
// create-react-a匹配版本 $ create-react-app -V 5.0.1 // node 版本 $ node -V v16.16.0
1、第一步 通过 create-react-app 快速创建环境，然后运行 yarn eject 释放webpack配置
npx create-react-app react-debug
npm run eject
2、第二步 降级react、react-dom版本
npm install react@17.x react-dom@17.x --save
修改index.js文件内容
3、运行npm run start
此时已经具有了调试打包后代码能力
好了。 为了 能调试 源码 我们继续
第三步 先在src目录下 下载react 17.0.2版本的代码
cd src git clone -b v17.0.2 --depth=1 git@github.com:facebook/react.git
第四步 进行配置
webpack 配置路径
config/webpack.config.js添加alias
{ 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'), 'legacy-events': path.resolve(__dirname,'../src/react/packages/legacy-events'), scheduler: path.resolve(__dirname, '../src/react/packages/scheduler'), } }
关闭esline
const disableESLintPlugin = true;
添加环境变量
const stringified = { __DEV__: true, __PROFILE__: true, __UMD__: true, __EXPERIMENTAL__: true, ... };
修改index.js中react、react-dom的引入
