如果直接在react項(xiàng)目中打點(diǎn)調(diào)試, 調(diào)試的是 react-dom.development.js,

而源碼里這些邏輯是分散在不同的包里的,如何才能夠調(diào)試 React 最初的源碼呢？
JS 代碼經(jīng)過編譯，會產(chǎn)生目標(biāo)代碼，但同時(shí)也會產(chǎn)生 sourcemap。sourcemap 的作用就是映射目標(biāo)代碼中的位置和源碼中的位置。
那這么說我們只要讓 react-dom.development.js 關(guān)聯(lián)上 sourcemap，就能調(diào)試最初的 React 源碼了？

步驟如下:

• git clone https://github.com/facebook/react
• 為了保證一定能正常生成 sourcemap，建議 reset 到
• git reset --hard 80f3d88190c07c2da11b5cac58a44c3b90fbc296
• 打開package 里的構(gòu)建打包文件: ./scripts/rollup/build.js

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

構(gòu)建的過程中會進(jìn)行多次轉(zhuǎn)換，會生成多次 sourcemap，然后把 sourcemap 串聯(lián)起來就是最終的 sourcemap。如果中間有一步轉(zhuǎn)換沒有生成 sourcemap，那就斷掉了，也就沒法把 sourcemap 串聯(lián)起來了。只要找出沒有生成 sourcemap 的那幾個插件注釋掉就可以了, 同樣在/scripts/rollup/build.js文件中: 這個是刪除 use strict 用的，可以去掉:

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

3:這個是用 prettier 格式化代碼的，也可以去掉。

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

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

我們改造了 build 流程，對 react 源碼進(jìn)行了 build，產(chǎn)生了帶有 sourcemap 的 react、react-dom 包，這些包最終導(dǎo)出的是 react-xx.development.js。
之后在項(xiàng)目里引入，經(jīng)過 webpack 打包，產(chǎn)生了 bundle.js 和 sourcemap。
之后調(diào)試工具運(yùn)行代碼的時(shí)候，會解析 sourcemap，完成從 bundle.js 到 react-xxx.development.js 的映射：

但是并不會再次做 react-xx.development.js 到 react 最初源碼的映射呀。
也就是調(diào)試工具只會解析一次 sourcemap。
那怎么辦呢？
不打包 react 和 react-dom 這倆包不就行了。不經(jīng)過 webpack 打包，那就沒有 webpack 產(chǎn)生的 sourcemap，不就一次就映射到 React 最初的源碼了么。
那怎么不打包這倆模塊呢？
webpack 支持 externals 來配置一些模塊使用全局變量而不進(jìn)行打包，這樣我們就可以單獨(dú)加載 react、react-dom，然后把他們導(dǎo)出的全局變量配置到 externals 就行了。

初始化一個react項(xiàng)目

npx create-react-app my-app

新建 .vscode/launch.json

{
“configurations”: [
{
“name”: “Launch Chrome”,
“request”: “l(fā)aunch”,
“type”: “pwa-chrome”,
“url”: “http://localhost:3000”,
“webRoot”: “${workspaceFolder}”
}
]
}

npm run eject: 項(xiàng)目下會多出 config 目錄和 public 目錄，這倆分別放著 webpack 配置和一些公共文件。修改 webpack 配置，在 externals 下添加 react 和 react-dom 包對應(yīng)的全局變量：注意這里的大小寫要小心,不能寫錯

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

這樣就表示成功了

參考鏈接:

https://juejin.cn/post/7126501202866470949

到此這篇關(guān)于vscode調(diào)試react 最初的源碼的文章就介紹到這了,更多相關(guān)vscode調(diào)試react 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論