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
相关推荐
PigeonGuan1 小时前
【jupyter】linux服务器怎么使用jupyter
linux·ide·jupyter
小狮子安度因2 小时前
PyQt的安装和再PyCharm中的配置
ide·pycharm·pyqt
VernonJsn4 小时前
visual studio 2005的MFC各种线程函数之间的调用关系
ide·mfc·visual studio
戎梓漩4 小时前
windows下安装curl,并集成到visual studio
ide·windows·visual studio
GISer_Jing5 小时前
React核心功能详解(一)
前端·react.js·前端框架
FØund4047 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
疯狂的沙粒8 小时前
如何在 React 项目中应用 TypeScript?应该注意那些点?结合实际项目示例及代码进行讲解!
react.js·typescript
热爱生活的五柒8 小时前
vscode利用ofExtensions插件可以调试单进程Openfoam,但是不能调试mpi多进程案例
ide·vscode·编辑器
小陈phd8 小时前
Vscode LinuxC++环境配置
linux·c++·vscode
界面开发小八哥8 小时前
更高效的Java 23开发,IntelliJ IDEA助力全面升级
java·开发语言·ide·intellij-idea·开发工具