coco723的博客

原创 patch-package保存修改依赖

需要注意的是，如果您的修改需要在其他开发人员的机器上运行，请确保他们也应用了 patch 文件，并且他们已经重新安装了所有依赖包。此外，如果该依赖包在未来的版本中更新了，您需要手动重新应用您的 patch 文件，并确保修改仍然有效。在您的项目中使用修改后的依赖包。请确保在您的项目中使用新的依赖包版本，以便 patch 文件中的修改被正确应用。如果您的修改需要在其他开发人员的机器上运行，请确保他们也应用了 patch 文件。找到您要修改的依赖包，并确定需要修改的文件。文件，并在其中添加您要进行的修改。

原创 基于react、vite搭建项目遇到的坑

检查您的hosts文件是否正确配置。您可以在计算机上搜索“hosts”文件并打开它，然后检查是否有任何条目将“localhost”映射到错误的IP地址。如果您使用代理服务器，可以尝试禁用它并重启开发服务器，以查看是否解决了问题。确保您的本地DNS配置正确。您可以尝试使用其他网络连接或在本地网络配置中更改DNS服务器。从控制台可以看出这个错误通常是由于本地DNS配置问题导致的。尝试在开发服务器的配置中使用IP地址而不是“localhost”。一步步检查下来，按第4点，问题得以解决；当启动本地服务的时候；

原创 如何初始化一个基于react+vite项目

并支持热重载，即在修改代码后，浏览器会自动更新以显示最新的更改。您可以开始添加业务逻辑和UI组件，以开发您的应用程序。，即可访问React应用程序的默认页面。预处理器，以及多种插件和工具集成。官网上下载并安装Node.js和。指定使用React模板创建项目。现在，您已经成功地创建了一个。打开浏览器，在地址栏中输入。是您要创建的项目名称，会自动使用最新版本的。

原创 钉钉端H5开发调试怎么搞

移动端配置：必须和PC端使用同一个WI-FI，链接好WI-FI之后，点击链好的WI-FI进入网路设置，配置代理，IP地址为PC端本机IP地址（如果不清楚，可以启动命令控制台，ipconfig查看）端口号为代理服务器的运行端口号。1. 在画UI的时候，更适合在PC端调试，更改代码或者直接在浏览器调试，都是实时出效果的；更符合开发体验和效率；2. 在调试一些功能和原生端交互的时候，PC端的H5页面是无法调试的；代理成功后，在移动端访问对应的页面，PC端代理服务器就可以看到请求的数据了，主要是后端接口请求；

原创 H5图片上传与裁剪（头像）

3. 因为基于react框架开发，所以使用了第三方插件react- cropper。最近接到的需求中H5头像上传和实现基本的图片裁剪，这也是比较常见且典型的场景。2. 选择图片后，将选中的图片放入画布；1. 调起移动端相机拍照或相册功能；1. 封装react组件。2. 实现图片裁剪功能。

原创 H5视频上传与播放

看需求似乎很简单，再加上本身antd-design已经封装好的Upload组件，功能强大且丰富；但是具体需求场景中还是有不少交互细节，也花了一些时间调试，为以后碰到类似场景更快速高效实现，记录和分享出来。一般二进制处理，可以支持各类文件格式，本质视频也是文件的一种格式；这样就解决了，Modal弹窗承载视频播放，Modal弹窗的宽高与视频的宽高一致；（1）配置中支持上传视频、上传成功后封面缩略图展示，点击后自动播放视频；（1）实现代码如下：被注释掉的代码：交互效果，点击直接新开页。

原创 create-react-app脚手架本地调试

代码】create-react-app脚手架本地调试。

原创 create-react-app脚手架核心源码之/packages/react-scripts解读

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JsjGCYba-，代码从上到下按需执行解析。执行完成后，就去新建的项目。源码解读，详细可以从。到这里是不是很眼熟，脚手架初始化的项目，，运行完成，新建项目。...

原创 create-react-app脚手架核心源码之/packages/create-react-app解读（五）

在create-react-app脚手架的目录为函数定义执行app创建${.cyan(.)}${.===?'isnot'}${.cyan()}${.cyan('react')}${.cyan()}${.cyan(.)}${?`with${chalk.cyan(.name)}`''}${}${.cyan(.)}${.cyan()}${.cyan(`${appName}/`)}${.cyan(.,'..'

原创 create-react-app脚手架核心源码之/packages/create-react-app解读（四）

在create-react-app脚手架的目录为函数定义创建reactapp${.}${.green()}${.}${.}

原创 create-react-app脚手架核心源码之/packages/create-react-app解读（三）

解读函数作用一个promise函数，发起HTPP请求，成功返回对应的版本。在create-react-app脚手架的目录为。当前版本为5.0.1。

原创 create-react-app脚手架之/packages/create-react-app核心源码解读（二）

检查Npm是否可以读取Cwd首先看下源码${.bold()}${.bold()}${.cyan('reg')}${.cyan('reg')}

原创 create-react-app之packages/create-react-app核心源码解读（一）

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FYRozzAK-1658396374476)(https//p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/121289cacda143268806988d9e9292f2~tplv-k3u1fbpfcp-watermark.image?为5.0.1,判断最新版本有，获取到的当前版本小于最新版本，给出版提示信息，否则，判断是否使用。判断当前运行node版本，小于V14，抛错，退出；......

原创 【前端RSA加密】

前端RSA加密

原创 antd pro使用问题记录

相关问题：按照官方文档，初始化项目，完成运行yarn start/dev报错如下输出：仔细看msfu相关文件报错，Google搜索什么是msfu?mfsu 是一种基于 webpack5 新特性 Module Federation 的打包提速方案。核心原理是将应用的依赖构建为一个 Module Federation 的 remote 应用，以免去应用热更新时对依赖的编译。因此，开启 mfsu 可以大幅减少热更新所需的时间。在生产模式，也可以通过提前编译依赖，大幅提升部署效率。尝试解决

原创 UC浏览器兼容问题

背景项目中列表页测试在UC浏览器中发现白屏，查看控制台unexpected token …猜测像是解构与法报错，本地运行代码发现是node_modules里文件解构与法报错报错npm库库名： dynamic-file查看代码，src/main.js，函数中有一个…other项目中引用dynamic-file的作用在npm库中的链接：https://www.npmjs.com/package/dynamic-file从库命名可以可以看出来是动态加载资源文件，umd规范，无任何依赖，动态加载j

原创 JSMpeg视频直播demo实践

背景：在升级公司内部头部依赖包的时候遇到的问题：在升级头部的时候，头部依赖的包，没有锁包，安装依赖库的时候包依赖的包会自动升级├─┬ @cnstrong/xxx│ ├─┬ eslint@6.8.0│ │ ├─┬ inquirer@7.3.3│ │ │ ├─┬ chalk@4.1.0chalk@4.1.0需要node10以上版本;服务器上的node版本是8，所以老项目大部分应该用到的都是node8的版本，项目中的npm库依赖于node8大部分包对node版本兼容比较好，但是有少数的包比较强依

原创 【UEditor富文本框】支持图片上传到文件服务器

上传图片到服务器import API from "@utils/api";import { MAX_SIZE } from '@utils/sheet/constant'import { message } from "antd";export const requestUploadImg = (blob: any, width: number, pageHeight: number) => { let imgWidth: number; if (width) { imgW

原创 【UEditor富文本框】React支持图片粘贴

支持图片粘贴 /** * 图本粘贴处理 * @param url String 图片链接 */ function pasteWordWithImg(htmlStr, imgArr) { let str = htmlStr; if (imgArr.length === 1) { const { upImgUrl, upWidth, upHeight } = imgArr[0]; getImgToBase64( upImgUrl,

原创 【UEditor富文本框】 React图片复制功能

支持图片复制 /** * URL转base64 * @param url String 图片链接 * @callback Function 获取base64格式后的回调函数 */function getImgToBase64(url, width, height, callback) { let canvas = document.createElement("canvas"); const context = canvas.getContext("2d"); co

原创 【UEditor富文本框】react图片上传插件注册

富文本中图片上传插件注册开发// @ts-nocheckimport { requestUploadImg } from "./pageImageSave";/** * 富文本框上传图片插件 * @param UE * @param width * @param pageHeight */export const imgPlugin = (UE, width, pageHeight) => { UE.ui["diyimg"] = function (editor) {

原创 React Hooks方式下富文本框失焦优化性能，判断内容是否改变

class组件法的实现传统Class方式下，很容易想到UNSAFE_componentWillUpdate，将nextProps与当前的props比较便可知道高度是否发生了变化UNSAFE_componentWillUpdate(nextProps) { if (this.props.height && nextProps.height && this.props.height !== nextProps.height && ueditor .

原创 Webpack5升级踩坑记

1. 开启hot: true但是热更新无效解决需要兼容webpack5.Xmodule.exports = { target: 'web', // webpack5.x 加上之后热更新才有效果}2. 如果使用了mini-css-extract-plugin插件（将样式以link的形式引入而不是style标签引入），则样式的热更新无效解决：需要判断开发模式使用style注入的形式，否则使用link引用的形式// webpack.common.js// 是否开发者模式const devM

原创 火狐浏览器低版本6.0兼容处理

环境：打开控制台查看浏览器版本：如上所示为火狐浏览器6.0，而目前最新版本为95.0，相差很大；代理调试：打开控制台报错信息如下Uncaught SyntaxError: In strict mode code, functions can only be declared at top level or immediately within another function.Error: Loading chunk 2 failed.(missing: https://stat..

原创 IE浏览器兼容处理

PC端IE浏览器兼容问题将craco.config.js的entry 入口配置entries[fileName] = [path.join(filePath, 'index.tsx')].filter(Boolean);修改为：entries[fileName] = ['babel-poplify', path.join(filePath, 'index.tsx')].filter(Boolean);扩展babel-poplify与@babel/poplify的区别是什么？...

原创 antd一键换肤，编译less文件报错 error [LessError: error evaluating function `ceil`: argument must be a number]

原创 npm publish报错记录

403 Forbidden按照文档中的步骤，注册登录后，准备好了库，然后执行npm publish，报了下面的错误：Error: 403 Forbidden - PUT registry.npmjs.org/xx - You do not have permission to publish "xx". Are you logged in as the correct user?查询资料后，发现于来世因为公开的库里面，已经有了同名的库。由于是免费的账号，所以想在npm上发包，要么换个名称，要么花钱创

原创 探究：Antd table组件用rowSelection时报shiftKey undefined

探究问题一：依赖版本的逻辑是什么？参考了这片文章：https://juejin.cn/post/6844903981668368392，启发，进一步探究如下：去查看npm包依赖情况，输入命令：yarn list 但是依赖太多，导致前面已经看不到了，所以将所有依赖输出到文件中yarn list > echo右侧为输出的echo文件，可以看到antd-mobile使用的是2.3.4版本，依赖的rc-checkbox版本是2.0.0antd使用的是4.16.8版本，依赖的rc-che

原创 Antd table组件用rowSelection时报shiftKey undefined

问题在使用antd Table的rowSelection时，无法选中，报如下错误：但是在codesandbox中，点击复选框，并不会报错定位https://juejin.cn/post/6844904138057187336问题描述，和当前实际遇到的类似，项目中同时有PC端和移动端的，package.json中有antd和antd-mobile依赖，接下来就差验证了，直接去掉antd-mobile依赖，重新yarn安装，因为，PC端和移动webpack分开打包，所以本地直接yarn dev:p

原创 H5页面在自己APP中图标显示正常，接入钉钉请求.woff图标字体报错

需求将移动端H5页面接入钉钉，就接入钉钉，这里不展开描述，接入钉钉，测试发现图标不显示问题发现浏览器network有iconfont.woff和iconfont.ttf url('iconfont.woff?t=1558522190245') format('woff'), url('iconfont.ttf?t=1558522190245') format('truetype'),解决转base64位后，问题解决url('data:font/woff2;charset=utf-8;

原创 火狐内核Firefox 6.0，icon显示乱码问题

问题发现低版本的Pad（公司自己的）， 出现Iconfont显示乱码；四代、五代班没有该问题定位一开始以为是webpack打包解析的问题，url-loader,filter-loader; 添加了匹配规则，测试发现问题人存在；后来抓包发现Pad三代板的浏览器内核是基于FireFox 6.0的，四代、五代板是基于chrome内核的，嗯？应该是样式的浏览器兼容问题；这样就可以具体问题具体找解决方法了解决方案方案一:not([class=“icon”]):not(i){font-family: “M

原创 antd Table使用列表warning：Each child in a list should have a unique “key“ prop

项目页面发现有warning信息，如下：看第一行是一个比价常见的错误信息，那第一反应就是map list应该没有设置key值，当前文件搜索map都设置了，为什么还有warning呢？代码按模块注解再结合错误堆栈信息定位到是调用Table导致的问题 ，但是不理解的是，明明Table的每一列都设置了key，那为什么还会报错呢？问题怎么解决？const columns = [ { title: 'Name', dataIndex: 'name', key: 'name' }, { title: '

原创 antd Table组件筛选功能，重新渲染筛选项依然选中

最近项目迭代中，设计到好多列表相关的展示，基于React封装了antd的Table组件，代码大致如下： <Table dataSource={dataSource} columns={columns} size={tableSize ? tableSize : "middle"} onChange={handleTableChange} scroll={scroll} pagination={{ current:

原创 webpack externl配置导致运行报错“React is not defined”

背景项目迭代中引入bzichart用于图表封装，组内同学增加了webpack打包配置如下：项目迭代只有PC端的需求，而老的项目中Pad和手机端H5代码与PC端放在同一个项目中，

原创 消息队列系列二（IOT中消息队列的应用）

许多消息队列旨在为您的应用程序提供轻量级的发布/订阅消息传输协议。为什么以及何时在您的物联网项目中使用消息队列？考虑温室中的温度传感器，它测量温度。您的应用程序可以在15分钟的时间间隔内（每天月96次）将温度发送到消息队列。而不是处理温室中的数据并始终连接。物联网的消息队列旨在提供轻量级的发布/订阅消息传输。您只需发送数据并在另一项服务中处理数据，而不是保留处理温室数据的应用程序。这需要较少的网络带宽，这可能会限制您的传感器，或者您的传感器通过卫星链路进行通信。消息队列使您的应用程序具有低功耗，发送

原创 消息队列系列一（相关概念）

#概念##1. 消息队列协议比较三种最常见和最流行的基于TCP/IP的消息传递协议，并提供每种优势的快速总结：AMQP、MQTT和STOMP，RabbitMQ 3.0版本中支持所有这三个协议-我们将使用这些协议作为示例并稍后再回来。AMQPAMQP-高级消息队列协议，旨在作为现有专有消息传递中间件的开放替代品。使用AMQP的两个最重要的原因是可靠性和互操作性。顾名思义，它提供了与消息传递相关的各种功能，包括可靠的排队，基于主题的发布和订阅消息传递，灵活的路由，事务和安全性。AMQP直接以扇出形式，按

原创 Git config运用

当我们安装好git软件包，或者着手在一个新的机子上使用git的时候，我们首先需要进行一些基本的配置工作，这个就要用到git config。git config是用于进行一些配置设置，有三种不同的方式来指定这些配置适用的范围：git config 针对一个git仓库git config --global 针对一个用户sudo git config --system 针对一个系统，因为是针对整个系统的，所以必须使用sudo第一种默认当前目录是一个git仓库，假设我们有一个仓库叫git_

原创 浏览器及对应内核梳理

1、五大主流浏览器五大浏览器：IE、Firefox、Chrome、Safari、Opera（都是采用的单内核）360、QQ浏览器都是采用双内核浏览器最重要的部分是浏览器的内核。浏览器内核是浏览器的核心，也称“渲染引擎”。查看浏览器使用的内核方式：chrome://version：浏览器IEFirefoxchromeSafariOperaQQ/搜狗/遨游360猎豹浏览器百度/世界之窗2345内核Trident（俗称IE内核）Gecko(开源，也俗称Fire

原创 safari10.1.2 报错attempted to assign to readonly property

场景用户在使用过程中，页面报错，报错信息如下：当前报错的电脑系统版本为:Safari浏览器版本：但是在其他mac系统上，同样是Safari浏览器，却能正常使用，没有报错信息定位问题于是开始查找相关资料，找到https://blog.csdn.net/weixin_34234721/article/details/91430275同样的报错信息，那么是不是这方面原因导致的呢？根据错误堆栈信息，找到了可能问题代码：改正后的代码：待验证(因为必须找对应版本的测试设备)...

原创 BziChart子弹图BulletChart业务组件封装

需求背景：图表库选型老的项目中使用G2配置实现，配置零散，后期不好维护，在新的需求中，考虑重构于是，调研了一波图表库，目前主流的图表库有echarts、highcharts、D3js、antv(G2, G6, F2)基于D3封装的react图表库rechart； 还有基于G2封装的react图表库viser、Bizcharts等等。还有关系图展示使用的Cytoscapejs；时序图常用工具库visjs等等 那么如何选择呢？由于项目是react框架，所以考虑用react封装的图表库，大概去看了一遍B