快捷導(dǎo)航

vscode調(diào)試react?最初的源碼解析

更新時(shí)間：2023年11月13日 10:45:18 作者：hellopari

這篇文章主要介紹了vscode調(diào)試react?最初的源碼,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友跟隨小編一起看看吧

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

而源碼里這些邏輯是分散在不同的包里的,如何才能夠調(diào)試 React 最初的源碼呢？
JS 代碼經(jīng)過編譯，會(huì)產(chǎn)生目標(biāo)代碼，但同時(shí)也會(huì)產(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，這個(gè)很容易理解，就是讓 rollup 在構(gòu)建時(shí)產(chǎn)生 sourcemap：

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

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

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

npm run build, 這樣我們就成功的 build 出了帶有 sourcemap 的 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)過 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)過 webpack 打包，那就沒有 webpack 產(chǎn)生的 sourcemap，不就一次就映射到 React 最初的源碼了么。
那怎么不打包這倆模塊呢？
webpack 支持 externals 來配置一些模塊使用全局變量而不進(jìn)行打包，這樣我們就可以單獨(dú)加載 react、react-dom，然后把他們導(dǎo)出的全局變量配置到 externals 就行了。

初始化一個(gè)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)目下會(huì)多出 config 目錄和 public 目錄，這倆分別放著 webpack 配置和一些公共文件。修改 webpack 配置，在 externals 下添加 react 和 react-dom 包對(duì)應(yīng)的全局變量：注意這里的大小寫要小心,不能寫錯(cuò)