【源码debug】以 react antd 为例，使用 sourceMap 的正确姿势

最新推荐文章于 2023-11-25 15:15:06 发布
最新推荐文章于 2023-11-25 15:15:06 发布
阅读量589 收藏
点赞数
分类专栏： 基础知识 || 知识梳理 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49834963/article/details/127573372
版权

参考：https://juejin.cn/post/7158430758070140942

antd 的编译流程：在这里插入图片描述

  1. 首先需要会使用 VSCode Debugger for Chrome，运行项目，打上断点 运行 - 启动调试
  2. 其次 修改映射，如把 Button 组件的引用位置改为 “antd/dist/antd” dist目录下，为 UMD 打包
  3. 此时单步断点进入 tsx 文件，该文件为编译后的
  4. 将源码修改打包覆盖
依轩cc
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-antd-starter:React Antd入门
05-10
它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！ 有关更多信息，请参见关于的部分。npm run eject 注意：这是单向操作。 eject ，...
生产上的问题你不会用 sourcemap 定位吗？
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
04-07 1014
前言欢迎关注《熊的猫》公众号，本公众号会定期分享技术干货！上周在群里突然被 @ 要我查看生产上出现的问题，由于这个项目比较老 (React15)，既没有埋点也没有接入错误监控，于是会得到如下的这样一个提示信息（以下错误是本地模拟的实际生产效果）：当你想要直接点击链接定位时，就会看到如下的形式：这怎么说呢？不能说一模一样，只能说毫不相关（表面上）！针对老项目再想加入埋点和错误监控可能就比较困难了，特...
devtools 无法加载 sourcemap_【笔记】如何正确使用 SourceMap？
weixin_39623050的博客
11-29 3110
什么是 Source Map在前端开发过程中，通常我们编写的源代码会经过多重处理（编译、封装、压缩等），最后形成产物代码。于是在浏览器中调试产物代码时，我们往往会发现代码变得面目全非，例如：因此，我们需要一种在调试时将产物代码显示回源代码的功能，source map 就是实现这一目标的工具。source-map 的基本原理是，在编译处理的过程中，在生成产物代码的同时生成产物代码中被转换的部分与源代...
【React】打包体积分析 source-map-explorer
最新发布
小秀的博客
11-25 598
通过分析打包体积，才能知道项目中的哪部分内容体积过大，方便知道哪些包需要进一步优化。
React学习笔记4：调试工具，chrome React扩展+source-map
weixin_34123613的博客
05-02 215
新搭建的个人博客，本文地址：React学习笔记4：调试工具，chrome React扩展+source-map毫无疑问调试是开发过程中相当相当痛苦的一件事情，如果没有好的工具配合那就更痛苦了！React是基于Babel的编译转码，到浏览器执行的实际上是es5代码，虽说良好的代码结构转码后可读性还是相当高，但对于我这种小白是接受不了了~1、...
react项目打包时关闭source-map产生的.map文件
Beamon__的博客
01-30 1186
react项目打包时关闭source-map产生的.map文件
怎么查看react脚手架_一锅烩了那些React项目开发绕不过去的配置
weixin_42116058的博客
01-31 558
写 React 已经有一段时间了，从开始到现在都是一路摸爬滚打过来的，踩过不少坑。虽然学习 React 已经很久了，但是和真正写还是有很大区别的，今天就从头开始记录下使用过程的点点滴滴，权且当作学习笔记吧，也希望能给将要入坑的小伙伴一点点启示吧！前言习惯了使用Vue开发的小伙伴，如果突然切换到React技术栈，刚开始肯定会有些手足无措，因为相比Vue的脚手架Vue-cli，React官方...
React调试方法
热门推荐
Dragon.G
10-17 1万+
做为一个React开发大白，表示不知道该怎么调试它真TMD痛苦！下面来分享下我通过阅读前人博客总结的调试方法。浏览器扩展工具 —— 『React Developer Tools』Facebook其实早为开发人人员提供了一个很给力的调试工具，并且可以在你的Chrome和FireFox上自由安装。对于前端开发者来说，上手使用这个工具没有任何难度。扩展下载地址： https://github.com/fa
如何设计实现一个React UI组件库——Ant Design源码阅读与浅析
weixin_34122810的博客
04-29 820
概述 在我们进行日常的项目开发的过程中，我们经常会遇到使用一些通用的UI组件库如BootStrap、Ant Design等。作为成熟的UI组件库，它能够提供提供一整套UI组件用来满足使用需求，能大大减少开发成本。 在使用了他人提供的组件库后，我自然就会有兴趣去了解一下别人开发的组件库到底是如何设计的，如何进行相关的组件封装。本文以Ant Design为例，让我们来了解一下目前较为有名的UI组件库是...
antd Table 源码分析
qq_39406460的博客
11-08 2130
antd的部分组件是基于封装而来的，今天我们要讲的antd table也是基于/**table**封装而来的，这次antd的源码解析，大部分也是基于rc-table，这次源码分析主要是讲一些特殊的知识点。如果想了解更多，可以评论一下，我看到评论后会添加。
【Umi/Ant Design Pro】调试node_modules
南乡人的博客
04-12 787
umi 默认情况下会使用msfu，进行预编译，提高加载速度，但是这样会导致在node_modules做的修改，无法通过热更新获得实时的改动。 如果使用Ant Design Pro框架，那么就需要在config.ts中把配置项 mfsu: {} 去掉。 等待再次编译，即可看到node_modules中的变化 ...
React+antd后台管理系统模板
12-01
基于React+antd写了一个后台管理模板。主要是熟悉antd组件和React，页面主要还是展示页面,比较简单不涉及后台交互的系统模板Demo
拼西西商城后台管理系统源码（react(hook) + antd + ts）.zip
05-16
拼西西商城后台管理系统源码（react(hook) + antd + ts） 拼西西商城后台管理系统源码（react(hook) + antd + ts） 拼西西商城后台管理系统源码（react(hook) + antd + ts） 拼西西...
react+antd搭建后台管理框架
05-20
react+antd搭建前端管理框架（***支持响应式***），主要模块分为：菜单、选项卡、面包屑；通过路由监听，实现三个模块之间的联动（同时监听浏览器）；状态采用react-redux进行集中管理。目前只包含前端代码，未与...
react使用antd表单赋值,用于修改弹框的操作
01-18
补充知识：react中使用antd的表单重置数据 resetFields 重置一组输入控件的值（为 initialValue）与状态，如不传入参数，则重置所有组件 Function([names: string[]]) 注：initialValue有值时会
cesium初识 && canvas基础
weixin_49834963的博客
07-05 1690
安装 https://cesium.com/downloads/ 压缩包解压后npm i，安装依赖如express等 然后运行npm run start 参考网站 http://cesiumcn.org/?node=learning&page=3 使用 引入 界面介绍 按住鼠标左键拖拽 - 让相机在数字地球平面平移。 按住鼠标右键拖拽 - 放缩相机。 鼠标滚轮滑动 - 放缩相机。 按住鼠标中键拖拽 - 在当前地球的屏幕中间点，旋转相机。 1.Geocoder : 一种地理位置搜索工具，用于显
axios封装拦截器
weixin_49834963的博客
06-22 945
Axios简介 Axios 是一个基于 Promise 的 HTTP 客户端，可以用在浏览器和 node.js 中，本质是XMLHttpRequests请求即ajax请求。 拥有以下特性： 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持Promise API; 能够拦截请求和响应； 能够转换请求和响应数据； 能够取消请求； 能够自定转化JSON数据； 客户端支持防御CSRF（XSRF） 封装拦截器 对请求或者响应拦截进行二次封装
Byte青训营笔记
weixin_49834963的博客
08-15 924
Day 1 html 语义化标签 如下图，优点：便于开发者阅读、可维护性高、机器更好的解析 语义化标签具体使用如下
三分钟带你走进可视化（对比svg、canvas、webgl）附心形线，粒子效果，三维webgl
weixin_49834963的博客
03-23 623
复制如下代码到chrome控制台，回车 // svg let body = document.querySelector("body") let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg") body.appendChild(svg) let circle = document.createElementNS("http://www.w3.org/2000/s
react antd框架怎么使用文件上传
05-21
在 React Antd 中使用文件上传，可以使用 Upload 组件。 首先，需要安装 antd 和 axios 包： ```bash npm install antd axios ``` 然后，在组件中引入 Upload 和 Button 组件： ```jsx import { Upload, Button } from 'antd'; ``` 接着，创建一个 state 用于保存上传文件的状态： ```jsx state = { fileList: [], }; ``` 然后，在 render 函数中将 Upload 和 Button 组件渲染出来： ```jsx render() { const { fileList } = this.state; const props = { action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76', onChange: this.handleChange, multiple: true, }; return ( <div> <Upload {...props} fileList={fileList}> <Button icon={<UploadOutlined />}>选择文件</Button> </Upload> </div> ); } ``` 其中，`props` 对象中的 `action` 属性是上传文件的接口地址，`onChange` 属性是上传文件状态发生改变时的回调函数，`multiple` 属性表示是否支持多选文件。 在 `handleChange` 回调函数中，可以处理上传文件的状态： ```jsx handleChange = ({ fileList }) => { this.setState({ fileList }); }; ``` 最后，在上传文件的接口中，可以通过 `request` 方法获取上传的文件信息： ```jsx axios({ method: 'post', url: 'https://www.mocky.io/v2/5cc8019d300000980a055e76', data: fileList[0], }).then((response) => { console.log(response); }); ``` 这样就完成了在 React Antd 中使用文件上传的实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值