另闢蹊徑搭建閱讀React源碼調試環境-支持全部React版本細分文件斷點調試

引言（爲何寫這篇文章）

若要高效閱讀和理解React源碼，搭建調試環境是必不可少的一步。而常規方法：使用react.development.js和react-dom.development.js調試，雖然方便，但沒法知道每段代碼屬於哪一個細分文件，因此本文將介紹一種取巧的方法搭建便於調試React源碼的環境，支持斷點調試細分文件，而且此方法理論上可應用於全部Reat版本。

最近一個月忙着換工做，這周終於有時間繼續寫發文章。寫文章耗時短，搭建工具耗時較長，讀者們可主要看工具使用模塊。

React使用當前最新版本：16.13.1

今年會寫一個「搞懂React源碼系列」，把React最核心的內容用最易懂的方式講清楚。2020年搞懂React源碼系列：

• React Diff原理
• React 調度原理
• （當前）搭建閱讀React源碼環境-支持React全部版本斷點調試細分文件
• React Hooks原理

快速使用

就像用手機並不必定要知道它的生產過程，使用源碼調試環境也不必定要知道它的構建方法。

方法1: 線上調試

訪問地址：https://terry-su.github.io/de...

（推薦）方法2：下載對應直接調試源碼文件

此方法優點是可修改源碼，好比在源碼中添加註釋。

使用步驟：

1 . 訪問項目debug-react-source-code，選擇要調試React版本對應分支,而後點擊下載壓縮包。

當前（2020/6/21）版本列表：

• debug-react-16.13.1
• debug-react-16.6.0

2 . 將壓縮包解壓後，用vscode打開該文件夾。vscode需安裝Debugger for Chrome拓展，用於在vscode對源碼添加斷點

3 . 安裝依賴後，開啓服務

npm install

npm start

4 . 在源碼中添加斷點，按F5啓動調試便可

~ ~ ~ ~ ~ ~

~ ~ ~ ~ ~ ~

背景

正片如今開始。

接下來說講搭建該調試環境背景。React官方建議直接使用源碼項目中建立生成的react.development.js和react-dom.development.js。

但此方法沒法看到每段代碼所在具體源文件。最好的方案是可以直接調試源碼中的細分文件。

其實以前網上能夠找到實現此方案的方法，用webpack新建一個項目，而後想辦法引入React源碼中的各個模塊，再添加各類配置，修改源文件以解決各類特殊狀況。我以前也嘗試過，但發現隨着版本更新，該方法已逐漸再也不適用，由於會遇到沒法解決的特殊狀況。

根本緣由是由於React源碼的打包配置較多，且含有自定義配置，因此即便給rollup配置了sourcemap也不會生效。

有人給react提過 一個編譯react生成sourcemap的issue，但Dan的回覆是："你應該具有不依賴sourcemap調試開發模式下源碼的能力"。HaHa

可是，可以調試源碼文件的確是剛需，怎麼辦呢？

實現方法

因而，開始從其餘突破口尋找解決方案。生成sourcemap的方案走不通，那經過react.development.js反過來生成各類細分文件是否可行？

若是要生成各個細分文件，就須要它們的路徑信息，在哪裏添加？

既然react源碼是經過rollup打包生成，那麼，可否在rollup配置中添加一個自定義插件，往react.development.js中注入代碼對應路徑？

順着這個思路，一番嘗試後，發現有一兩種特殊狀況要處理，但最終目的成功實現！是的，目前所搭建調試環境就是使用此方法。

具體實現細節較複雜，這裏先簡單說下主要流程：

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

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

3 . 根據核心數據，新建react,react-dom對應html和主要html,使用iframe實現隔離react、react-dom代碼做用域和使不一樣html可以通訊。

衡量利弊

此方法優勢：

• 簡化（移除flow類型代碼和生產環境相關代碼）
• 方便使用，可放在線上調試（體驗地址：https://terry-su.github.io/de...）

此方法缺點：

• 沒有Flow類型代碼
• 沒有生產環境相關代碼

如何解決缺點？方法就是配合原始源碼細分文件一塊兒閱讀，好比查看一個對象的類型結構。
但大多數狀況下，此方法都適用。

具體實現

本小節僅建議想了解此工具構建原理的同窗閱讀， 對於只須要獲取調試環境的讀者，可跳過此小節。

1 . 下載react源碼，安裝依賴項。

2 . 建立自定義rollup插件，生成新的build.js ：在新build.js中引入自定義rollup插件，該插件的做用是給每一個文件的頭部和尾部添加特殊起始標記和結束標記，每一個標記都包含該文件的路徑信息
運行新的build.js，從而生成注入了細分文件路徑信息的react.development.js和react-dom.development.js

3 . 處理react-development.js和react-dom.development.js，生成核心數據：基於兩個JS文件，生成對應核心數據，類型結構爲：{outputFile: string, text: string}[]。outputFile是反向輸出的文件路徑，text爲文件內容。

4 . 基於核心數據，建立源碼調試環境: 建立dependency-react.html和dependency-react-dom.html和其餘所需文件。目錄結構爲：

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

其中，index.js即爲調試入口文件。

完整內容建議感興趣的同窗直接閱讀源碼：debug-react-source-code。

預告

下一篇將寫React hooks的原理。Hooks的精髓每每不是的它的實現原理，而是設計理念。但弄懂React hooks原理，能讓咱們進一步加深對hooks思想和設計方式的理解。