React源码学习进阶（一）新版React如何调试源码？
React 16版本之后，对源码架构进行了较大的升级调整，项目从gulp/grunt迁移到rollup，采用多包构建的方式组织代码，我们常常debug的是打包后的文件，本文可以解决我们想debug到源码的问题。
使用create-react-app创建项目
create-react-app创建项目npx create-react-app react-debug此时，我们如果打一个debugger，会发现调用堆栈是bundle.js：
我们先启用VSCode的调试模式，在项目下新建一个launch.json（注意我这里cra启动的端口是3001）：
启动调试就可以看到我们已经可以通过VSCode来调试了：
但是目前还只能调试打包后的代码，我们需要定位到源码。
下载React源码
然后我们在React下编译一下代码：
接着我们去外层eject一下，方便调整webpack配置：
然后在config/webpack.config.js下增加alias：
这时跑起来我们发现有报错：
这个是因为ModuleScopePlugin的限制，去配置里把这个插件删掉，我们就发现堆栈走到了最新的react代码里：
但是目前我们还是在development.js里面，想要定位到源码，还需要生成sourceMap。
支持sourceMap
sourceMap首先我们将vscode的sourcemap打开，在launch.json中加入配置：
然后在react源码编译时，加入sourceMap，更改react/scripts/rollup/build.js：
然后重新运行build，会发现如下报错：
这是因为有些rollup插件不支持sourcemap，在文件里面去掉以下4个插件：
这个时候就可以build起来了。我们可以看到map文件已经生成到目录下：
此时我们在VSCode中开启debug就完全可以看到源码堆栈了：
（如果看不到的话，确认下create-react-app中引用react-dom的地方，要把/client去掉）。
Last updated