引言(為什么寫(xiě)這篇文章)

若要高效閱讀和理解React源碼，搭建調(diào)試環(huán)境是必不可少的一步。而常規(guī)方法：使用react.development.js和react-dom.development.js調(diào)試，雖然方便，但無(wú)法知道每段代碼屬于哪個(gè)細(xì)分文件，所以本文將介紹一種取巧的方法搭建便于調(diào)試React源碼的環(huán)境，支持?jǐn)帱c(diǎn)調(diào)試細(xì)分文件，并且此方法理論上可應(yīng)用于所有Reat版本。

最近一個(gè)月忙著換工作，這周終于有時(shí)間繼續(xù)寫(xiě)發(fā)文章。寫(xiě)文章耗時(shí)短，搭建工具耗時(shí)較長(zhǎng)，讀者們可主要看工具使用模塊。

React使用當(dāng)前最新版本：16.13.1

今年會(huì)寫(xiě)一個(gè)“搞懂React源碼系列”，把React最核心的內(nèi)容用最易懂的方式講清楚。2020年搞懂React源碼系列：

• React Diff原理

• React 調(diào)度原理

• (當(dāng)前)搭建閱讀React源碼環(huán)境-支持React所有版本斷點(diǎn)調(diào)試細(xì)分文件

• React Hooks原理

快速使用

就像用手機(jī)并不一定要知道它的生產(chǎn)過(guò)程，使用源碼調(diào)試環(huán)境也不一定要知道它的構(gòu)建方法。

方法1: 線上調(diào)試

訪問(wèn)地址：https://terry-su.github.io/debug-react-source-code/example/react-16.13.1/

(推薦)方法2：下載對(duì)應(yīng)直接調(diào)試源碼文件

此方法優(yōu)勢(shì)是可修改源碼，比如在源碼中添加注釋。

使用步驟：

1 . 訪問(wèn)項(xiàng)目debug-react-source-code(https://github.com/Terry-Su/debug-react-source-code)，選擇要調(diào)試React版本對(duì)應(yīng)分支,然后點(diǎn)擊下載壓縮包。

當(dāng)前(2020/6/21)版本列表：

• debug-react-16.13.1

• debug-react-16.6.0

2 . 將壓縮包解壓后，用vscode打開(kāi)該文件夾。vscode需安裝Debugger for Chrome拓展，用于在vscode對(duì)源碼添加斷點(diǎn)

3 . 安裝依賴后，開(kāi)啟服務(wù)

npm?installnpm?start

4 . 在源碼中添加斷點(diǎn)，按F5啟動(dòng)調(diào)試即可

~ ~ ~ ~ ~ ~

~ ~ ~ ~ ~ ~

背景

正片現(xiàn)在開(kāi)始。

接下來(lái)講講搭建該調(diào)試環(huán)境背景。React官方建議直接使用源碼項(xiàng)目中創(chuàng)建生成的react.development.js和react-dom.development.js。

但此方法無(wú)法看到每段代碼所在具體源文件。最好的方案是能夠直接調(diào)試源碼中的細(xì)分文件。

其實(shí)之前網(wǎng)上可以找到實(shí)現(xiàn)此方案的方法，用webpack新建一個(gè)項(xiàng)目，然后想辦法引入React源碼中的各個(gè)模塊，再添加各種配置，修改源文件以解決各種特殊情況。我之前也嘗試過(guò)，但發(fā)現(xiàn)隨著版本更新，該方法已逐漸不再適用，因?yàn)闀?huì)遇到無(wú)法解決的特殊情況。

根本原因是因?yàn)镽eact源碼的打包配置較多，且含有自定義配置，所以即使給rollup配置了sourcemap也不會(huì)生效。

有人給react提過(guò)一個(gè)編譯react生成sourcemap的issue，但Dan的回復(fù)是："你應(yīng)該具備不依賴sourcemap調(diào)試開(kāi)發(fā)模式下源碼的能力"。HaHa

但是，能夠調(diào)試源碼文件的確是剛需，怎么辦呢？

實(shí)現(xiàn)方法

于是，開(kāi)始從其他突破口尋找解決方案。生成sourcemap的方案走不通，那通過(guò)react.development.js反過(guò)來(lái)生成各種細(xì)分文件是否可行？

如果要生成各個(gè)細(xì)分文件，就需要它們的路徑信息，在哪里添加？

既然react源碼是通過(guò)rollup打包生成，那么，能否在rollup配置中添加一個(gè)自定義插件，往react.development.js中注入代碼對(duì)應(yīng)路徑？

順著這個(gè)思路，一番嘗試后，發(fā)現(xiàn)有一兩種特殊情況要處理，但最終目的成功實(shí)現(xiàn)！是的，目前所搭建調(diào)試環(huán)境就是使用此方法。

具體實(shí)現(xiàn)細(xì)節(jié)較復(fù)雜，這里先簡(jiǎn)單說(shuō)下主要流程：

1 . 生成注入細(xì)分源碼文件路徑信息的react.development.js和react-dom.development.js

2 . 從react.development.js和react-dom.development.js中提取核心數(shù)據(jù)，反向生成源碼文件

3 . 根據(jù)核心數(shù)據(jù)，新建react,react-dom對(duì)應(yīng)html和主要html,使用iframe實(shí)現(xiàn)隔離react、react-dom代碼作用域和使不同html能夠通信。

衡量利弊

此方法優(yōu)點(diǎn)：

• 簡(jiǎn)化(移除flow類型代碼和生產(chǎn)環(huán)境相關(guān)代碼)

• 方便使用，可放在線上調(diào)試(體驗(yàn)地址：https://terry-su.github.io/de...)

此方法缺點(diǎn)：

• 沒(méi)有Flow類型代碼

• 沒(méi)有生產(chǎn)環(huán)境相關(guān)代碼

如何解決缺點(diǎn)？方法就是配合原始源碼細(xì)分文件一起閱讀，比如查看一個(gè)對(duì)象的類型結(jié)構(gòu)。
但大多數(shù)情況下，此方法都適用。

具體實(shí)現(xiàn)

本小節(jié)僅建議想了解此工具構(gòu)建原理的同學(xué)閱讀， 對(duì)于只需要獲取調(diào)試環(huán)境的讀者，可跳過(guò)此小節(jié)。

1 . 下載react源碼，安裝依賴項(xiàng)。

2 . 創(chuàng)建自定義rollup插件，生成新的build.js?：在新build.js中引入自定義rollup插件，該插件的作用是給每個(gè)文件的頭部和尾部添加特殊起始標(biāo)記和結(jié)束標(biāo)記，每個(gè)標(biāo)記都包含該文件的路徑信息
運(yùn)行新的build.js，從而生成注入了細(xì)分文件路徑信息的react.development.js和react-dom.development.js

3 . 處理react-development.js和react-dom.development.js，生成核心數(shù)據(jù)：基于兩個(gè)JS文件，生成對(duì)應(yīng)核心數(shù)據(jù)，類型結(jié)構(gòu)為：{outputFile: string, text: string}[]。outputFile是反向輸出的文件路徑，text為文件內(nèi)容。

4 . 基于核心數(shù)據(jù)，創(chuàng)建源碼調(diào)試環(huán)境: 創(chuàng)建dependency-react.html和dependency-react-dom.html和其他所需文件。目錄結(jié)構(gòu)為：

/react.development/
/react-dom.development/
/babel.js
/dependency-main.html
/dependency-react.html
/dependency-react-dom.html
/index.html
/index.js

其中，index.js即為調(diào)試入口文件。

完整內(nèi)容建議感興趣的同學(xué)直接閱讀源碼：debug-react-source-code(https://github.com/Terry-Su/debug-react-source-code)。

預(yù)告

下一篇將寫(xiě)React hooks的原理。Hooks的精髓往往不是的它的實(shí)現(xiàn)原理，而是設(shè)計(jì)理念。但弄懂React hooks原理，能讓我們進(jìn)一步加深對(duì)hooks思想和設(shè)計(jì)方式的理解。

總結(jié)

以上是生活随笔為你收集整理的webuploader 怎么在react中_另辟蹊径搭建阅读React源码调试环境支持所有React版本细分文件断点调试...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。