vscode调试react 最初的源码

如果直接在react项目中打点调试, 调试的是 react-dom.development.js,

而源码里这些逻辑是分散在不同的包里的,如何才能够调试 React 最初的源码呢?

JS 代码经过编译,会产生目标代码,但同时也会产生 sourcemap。sourcemap 的作用就是映射目标代码中的位置和源码中的位置。

那这么说我们只要让 react-dom.development.js 关联上 sourcemap,就能调试最初的 React 源码了?

步骤如下:

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

  2. 为了保证一定能正常生成 sourcemap,建议 reset 到
    git reset --hard 80f3d88190c07c2da11b5cac58a44c3b90fbc296

  3. 打开package 里的构建打包文件: ./scripts/rollup/build.js

    • 找到 rollup 的配置,添加一行 sourcemap: true,这个很容易理解,就是让 rollup 在构建时产生 sourcemap:

      构建的过程中会进行多次转换,会生成多次 sourcemap,然后把 sourcemap 串联起来就是最终的 sourcemap。如果中间有一步转换没有生成 sourcemap,那就断掉了,也就没法把 sourcemap 串联起来了。只要找出没有生成 sourcemap 的那几个插件注释掉就可以了, 同样在/scripts/rollup/build.js文件中:
    1. 这个是删除 use strict 用的,可以去掉:

      2:这个是生产环境压缩代码的,也可以去掉

      3:这个是用 prettier 格式化代码的,也可以去掉。
  4. npm run build, 这样我们就成功的 build 出了带有 sourcemap 的 react 包!


    我们已经 build 出了带有 sourcemap 的 react 和 react-dom 包,那把这俩包复制到测试项目的 node_modules 下,就可以直接调试最初的源码了么?
    我们改造了 build 流程,对 react 源码进行了 build,产生了带有 sourcemap 的 react、react-dom 包,这些包最终导出的是 react-xx.development.js。
    之后在项目里引入,经过 webpack 打包,产生了 bundle.js 和 sourcemap。
    之后调试工具运行代码的时候,会解析 sourcemap,完成从 bundle.js 到 react-xxx.development.js 的映射:

但是并不会再次做 react-xx.development.js 到 react 最初源码的映射呀。

也就是调试工具只会解析一次 sourcemap。

那怎么办呢?

不打包 react 和 react-dom 这俩包不就行了。不经过 webpack 打包,那就没有 webpack 产生的 sourcemap,不就一次就映射到 React 最初的源码了么。

那怎么不打包这俩模块呢?

webpack 支持 externals 来配置一些模块使用全局变量而不进行打包,这样我们就可以单独加载 react、react-dom,然后把他们导出的全局变量配置到 externals 就行了。

  1. 初始化一个react项目
c 复制代码
npx create-react-app my-app
  1. 新建 .vscode/launch.json

{

"configurations": [

{

"name": "Launch Chrome",

"request": "launch",

"type": "pwa-chrome",

"url": "http://localhost:3000",

"webRoot": "${workspaceFolder}"

}

]

}

  1. npm run eject: 项目下会多出 config 目录和 public 目录,这俩分别放着 webpack 配置和一些公共文件。
  2. 修改 webpack 配置,在 externals 下添加 react 和 react-dom 包对应的全局变量:注意这里的大小写要小心,不能写错5. 然后把 react.development.js 和 react-dom.development.js 放到 public 下,并在 index.html 里面加载这俩文件:
  3. 这样就表示成功了
    参考链接:https://juejin.cn/post/7126501202866470949
相关推荐
PleaSure乐事4 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
getaxiosluo4 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
新星_6 小时前
函数组件 hook--useContext
react.js
小灰灰__6 小时前
IDEA加载通义灵码插件及使用指南
java·ide·intellij-idea
Mortal_hhh7 小时前
VScode的C/C++点击转到定义,不是跳转定义而是跳转声明怎么办?(内附详细做法)
ide·vscode·stm32·编辑器
阿伟来咯~7 小时前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端7 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱7 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
无极程序员7 小时前
PHP常量
android·ide·android studio
bysking8 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js