什么？調(diào)試 React 源碼還有優(yōu)雅和不優(yōu)雅之分？

別著急，我們先來(lái)聽(tīng)個(gè)故事：

東東是一名前端工程師，主要用 React 技術(shù)棧，用了多年之后想深入一下，所以最近開(kāi)始看 React 源碼。

他把 react 和 react-dom 包下載了下來(lái)，在項(xiàng)目里引入，開(kāi)發(fā)服務(wù)跑起來(lái)后，打開(kāi) Chrome Devtools 打斷點(diǎn)調(diào)試。

這樣調(diào)試了一段時(shí)間之后，他有了一些困惑：

這樣調(diào)試是可以的，但是總感覺(jué)和源碼有段距離，因?yàn)檎{(diào)試的是 react-dom.development.js

而源碼里這些邏輯是分散在不同的包里的，所以就算搞懂了邏輯，也不知道這些邏輯在哪些包里，只能靠搜索來(lái)定位。

所以他就在想，是不是有更好的調(diào)試方式，能夠調(diào)試 React 最初的源碼呢？

于是，他跑來(lái)問(wèn)我：光哥，你調(diào)試 React 源碼會(huì)有這些問(wèn)題么？你是怎么調(diào)試的呀？

我說(shuō)，確實(shí)，我最開(kāi)始也是調(diào)試的 react-dom.development.js，但是現(xiàn)在已經(jīng)能直接調(diào)試 React 最初的源碼了，而且是在 VSCode 里調(diào)試的，點(diǎn)擊調(diào)用棧能直接打開(kāi)對(duì)應(yīng)的 React 源碼文件并定位到對(duì)應(yīng)行列號(hào)：

哇哦，這就是我想要的調(diào)試效果，這是怎么做到的呀。

想實(shí)現(xiàn)這樣的調(diào)試效果確實(shí)還有點(diǎn)復(fù)雜，我們一點(diǎn)點(diǎn)來(lái)看：

首先，我們要做到在 VSCode 里調(diào)試 React 項(xiàng)目，而不是在 Chrome Devtools 里，這樣才能做到直接打開(kāi)對(duì)應(yīng)的文件：

用 VSCode 調(diào)試 React 項(xiàng)目

我們用 create-react-app 創(chuàng)建一個(gè) react 項(xiàng)目，然后 npm run start 跑起來(lái)。

這時(shí)候?yàn)g覽器訪問(wèn)就可以用 Chrome Devtools 調(diào)試了：

但我們的目標(biāo)是在 VSCode 里調(diào)試，所以要添加一個(gè) VSCode 的 debugger 配置：

在根目錄下建一個(gè) .vscode/launch.json 的文件，添加一個(gè) chrome 類型的調(diào)試配置，輸入調(diào)試的 url。

然后點(diǎn)擊 debug 啟動(dòng)：

這時(shí)候就可以在 VSCode 里直接打斷點(diǎn)調(diào)試了：

用 VSCode 調(diào)試肯定會(huì)比 Chrome Devtools 方便一些。但這不是我們最主要的目的，現(xiàn)在調(diào)試的依然是 react-dom.development.js：

那怎么調(diào)試 react 最初的源碼呢？

這就涉及到 sourcemap 的作用了：

sourcemap

JS 代碼經(jīng)過(guò)編譯，會(huì)產(chǎn)生目標(biāo)代碼，但同時(shí)也會(huì)產(chǎn)生 sourcemap。sourcemap 的作用就是映射目標(biāo)代碼中的位置和源碼中的位置。

比如源碼中的第 3 行第 5 列的代碼對(duì)應(yīng)著編譯后的第 1 行第 10 列的代碼。

類似這樣的映射有很多，經(jīng)過(guò)編碼以后是這樣的：

在 js 文件最后一行，加上這樣一行注釋就可以關(guān)聯(lián) sourcemap：

//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map

調(diào)試工具支持解析 sourcemap 來(lái)映射調(diào)試的代碼位置到源代碼中的位置。

比如 chrome devtools 的 Sources 面板就會(huì)提示從哪個(gè)文件 source mapping 過(guò)來(lái)的，點(diǎn)擊鏈接還可以跳到映射之前的文件：

同樣，VSCode Debugger 也支持 sourcemap，有個(gè) sourceMaps 的調(diào)試配置選項(xiàng)來(lái)開(kāi)啟和關(guān)閉 sourcemap 功能，默認(rèn)開(kāi)啟。

那這么說(shuō)我們只要讓 react-dom.development.js 關(guān)聯(lián)上 sourcemap，就能調(diào)試最初的 React 源碼了？

理論上是這樣的，但是現(xiàn)在下載的 react、react-dom 包里都不帶 sourcemap，我們得把 React 源碼下載下來(lái)自己 build：

build 出帶有 sourcemap 的 react 包

用 npm 下載的 react 包是這樣的：

而我們需要的是帶有 sourcemap 的代碼，也就是這樣的：

這就要下載 react 源碼自己 build 了：

git clone https://github.com/facebook/react

下載下來(lái)的代碼執(zhí)行 npm run build 就能看到 build 的產(chǎn)物：

這里的 build/node_modules 下的 react 和 react-dom 包就是我們需要的。

但是現(xiàn)在 build 出的代碼并沒(méi)有帶 sourcemap，需要改造下 build 流程。

build 命令執(zhí)行的是 ./scripts/rollup/build.js，打開(kāi)這個(gè)文件做一些修改。

找到 rollup 的配置，添加一行 sourcemap: true，這個(gè)很容易理解，就是讓 rollup 在構(gòu)建時(shí)產(chǎn)生 sourcemap：

再跑 npm run build，會(huì)報(bào)這樣的錯(cuò)誤：

某個(gè)轉(zhuǎn)換的插件沒(méi)有生成 sourcemap。

這個(gè)是因?yàn)闃?gòu)建的過(guò)程中會(huì)進(jìn)行多次轉(zhuǎn)換，會(huì)生成多次 sourcemap，然后把 sourcemap 串聯(lián)起來(lái)就是最終的 sourcemap。如果中間有一步轉(zhuǎn)換沒(méi)有生成 sourcemap，那就斷掉了，也就沒(méi)法把 sourcemap 串聯(lián)起來(lái)了。

這個(gè)問(wèn)題的解決只要找出沒(méi)有生成 sourcemap 的那幾個(gè)插件注釋掉就可以了：

在 getPlugins 方法里，把這樣 4 個(gè)插件給注釋掉：

這個(gè)是刪除 use strict 用的，可以去掉。

這個(gè)是生產(chǎn)環(huán)境壓縮代碼的，也可以去掉。

這個(gè)是用 prettier 格式化代碼的，也可以去掉。

這個(gè)是添加一些頭部的代碼的，比如 Lisence 等，也沒(méi)啥用，可以去掉。

去掉這四個(gè)插件之后，再運(yùn)行 npm run build，這時(shí)候就能正常進(jìn)行構(gòu)建了，然后產(chǎn)生的代碼就是帶有 sourcemap 的：

這樣我們就成功的 build 出了帶有 sourcemap 的 react 包！

接下來(lái)只剩最后一步，用上 sourcemap，實(shí)現(xiàn)直接調(diào)試 React 最初的源碼，

應(yīng)用 sourcemap，調(diào)試 React 最初的源碼

我們已經(jīng) build 除了帶有 sourcemap 的 react 和 react-dom 包，那把這倆包復(fù)制到測(cè)試項(xiàng)目的 node_modules 下，就可以直接調(diào)試最初的源碼了么？

還是不行。

為什么呢？

看下面這張圖：

我們改造了 build 流程，對(duì) react 源碼進(jìn)行了 build，產(chǎn)生了帶有 sourcemap 的 react、react-dom 包，這些包最終導(dǎo)出的是 react-xx.development.js。

之后在項(xiàng)目里引入，經(jīng)過(guò) webpack 打包，產(chǎn)生了 bundle.js 和 sourcemap。

之后調(diào)試工具運(yùn)行代碼的時(shí)候，會(huì)解析 sourcemap，完成從 bundle.js 到 react-xxx.development.js 的映射：

但是并不會(huì)再次做 react-xx.development.js 到 react 最初源碼的映射呀。

也就是調(diào)試工具只會(huì)解析一次 sourcemap。

那怎么辦呢？

不打包 react 和 react-dom 這倆包不就行了。不經(jīng)過(guò) webpack 打包，那就沒(méi)有 webpack 產(chǎn)生的 sourcemap，不就一次就映射到 React 最初的源碼了么。

那怎么不打包這倆模塊呢？

webpack 支持 externals 來(lái)配置一些模塊使用全局變量而不進(jìn)行打包，這樣我們就可以單獨(dú)加載 react、react-dom，然后把他們導(dǎo)出的全局變量配置到 externals 就行了。

要改動(dòng) webpack 配置的話，在 create-react-app 下要執(zhí)行 npm run eject。

然后項(xiàng)目下會(huì)多出 config 目錄和 public 目錄，這倆分別放著 webpack 配置和一些公共文件。

修改 webpack 配置，在 externals 下添加 react 和 react-dom 包對(duì)應(yīng)的全局變量：

然后把 react.development.js 和 react-dom.development.js  放到 public 下，并在 index.html 里面加載這倆文件：

這樣再重新 debug，你就會(huì)發(fā)現(xiàn) sourcemap 映射到 React 最初的源碼了：

不再是 react-dom.development.js 下的代碼，而是具體 react-xxx 包下的。

這就達(dá)到了最開(kāi)始的目的，能直接調(diào)試 React 最初的源碼！

還記得我們這樣做的意義么？

能調(diào)試最初的源碼才能知道哪段邏輯是在哪個(gè)包里的，不然要自己去搜索。

這樣已經(jīng)能夠達(dá)到我們的目的了，但是要想點(diǎn)擊調(diào)用棧直接定位到 git clone 下來(lái)的 react 項(xiàng)目的文件，還需要再做一步。

關(guān)聯(lián) react 源碼項(xiàng)目

看我最初演示的效果，點(diǎn)擊調(diào)用棧是能直接定位到 react 源碼項(xiàng)目的文件的：

這是怎么做到的呢？

其實(shí)只要 sourcemap 生效，并且 map 到的文件是在當(dāng)前 workspace 下，VSCode 就會(huì)打開(kāi)對(duì)應(yīng)的文件。

現(xiàn)在 sourcemap 已經(jīng)生效了，只不過(guò) react 項(xiàng)目沒(méi)有在 workspace 下。所以，如果想直接定位 react 源碼項(xiàng)目的話，可以這樣做：

創(chuàng)建一個(gè)新的目錄，把 react 源碼項(xiàng)目和測(cè)試的項(xiàng)目放到一個(gè) workspace 下，這樣再調(diào)試的時(shí)候，map 到的文件就能在 workspace 找到了，也就會(huì)打開(kāi)相應(yīng)的文件。

只不過(guò)現(xiàn)在 sourcemap 下都是這樣的相對(duì)路徑，會(huì)導(dǎo)致映射到的文件路徑不對(duì)：

所以再去修改下 react build 流程，在 ./script/rollup/build.js 下，添加一個(gè) sourcemap 的路徑映射，把 ../../../packages 映射到 react 項(xiàng)目的絕對(duì)路徑/pcakges ：

這時(shí)候再重新 build，生成的 sourcemap 就是絕對(duì)路徑了：

把新生成的 sourcemap 復(fù)制過(guò)去，覆蓋一下。

在新的 workspace 里 debug，你就會(huì)發(fā)現(xiàn)，路徑映射對(duì)了：

點(diǎn)擊調(diào)用棧能直接打開(kāi) react 源碼項(xiàng)目的對(duì)應(yīng)文件了！

至此，我們就能優(yōu)雅的調(diào)試 React 最初的源碼了。

總結(jié)

用了 react 比較長(zhǎng)時(shí)間后，自然會(huì)想調(diào)試下源碼來(lái)深入下，但是常規(guī)的調(diào)試方式只能調(diào)試 react-dom.development.js，雖然能理清邏輯，但是對(duì)應(yīng)不到源碼里的哪些包哪些文件，總感覺(jué)和最初的源碼還有一段距離。

這個(gè)問(wèn)題是有解決方案的，就是會(huì)有點(diǎn)復(fù)雜：

首先要把 react 源碼項(xiàng)目下載下來(lái)，修改 build 流程來(lái)生成帶有 sourcemap 的 react 和 react-dom 包，并且修改 sourcemap 映射的路徑為絕對(duì)路徑。

然后把 react 和 react-dom 配置到 webpack 的 externals 里，不進(jìn)行打包，而是單獨(dú)在 index.html 里引入。

因?yàn)?sourcemap 只會(huì)映射一次，而 webpack 已經(jīng)生成了一次 sourcmap，只有跳過(guò)這倆模塊的打包才能讓 react 和 react-dom 的 sourcemap 生效。

之后用 VSCode Debugger 來(lái)調(diào)試 React 項(xiàng)目，就能映射到最初的 React 源碼了。

如果想點(diǎn)擊調(diào)用棧直接打開(kāi)對(duì)應(yīng) React 源碼項(xiàng)目的文件，那就新建一個(gè) workspace，把測(cè)試項(xiàng)目和 React 源碼項(xiàng)目包含就行了。因?yàn)?VSCode 如果在 workspace 下找到了 source map 到的文件，就會(huì)直接打開(kāi)對(duì)應(yīng)的文件。

東東：最終的調(diào)試效果是很完美，但這個(gè)流程有點(diǎn)復(fù)雜

我：確實(shí)，想實(shí)現(xiàn)能調(diào)試最初的源碼，并且還能直接打開(kāi)對(duì)應(yīng)的 react 源碼項(xiàng)目的文件，還是比較麻煩的，但好在只需要配置一次，以后就能一直用了，而且類似的源碼調(diào)試方式也可以應(yīng)用到其他源碼的調(diào)試。

毫不夸張地說(shuō)，這應(yīng)該是全網(wǎng)最優(yōu)雅的 React 源碼調(diào)試方式了。