coco723的博客

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

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，而目前最新版本为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..

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的区别是什么？...

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上发包，要么换个名称，要么花钱创

探究问题一：依赖版本的逻辑是什么？参考了这片文章：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时，无法选中，报如下错误：但是在codesandbox中，点击复选框，并不会报错定位https://juejin.cn/post/6844904138057187336问题描述，和当前实际遇到的类似，项目中同时有PC端和移动端的，package.json中有antd和antd-mobile依赖，接下来就差验证了，直接去掉antd-mobile依赖，重新yarn安装，因为，PC端和移动webpack分开打包，所以本地直接yarn dev:p

需求将移动端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;

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

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

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

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

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

发现页面性能测试工具使用chrome自带的performance，自测时，发现在操作选择时间的时候，明显上升，并且在操作后，未下降：定位问题在内存这里，我们一般世界住Google浏览器的开发工具，然后获取下页面的内存快照，然后分析具体占用过大内存的对象除了查看内存占用过大的对象之外，也可以切换到Containment这里查看一些占用内存过大的全局对象查找相关可能代码1、 本地缓存（待验证）2、时间转换，具体代码不方便贴出，主要是处理失去问题，多次转化时间导致/** * new Da

问题本地起服务，访问页面的时候报错，刚还运行的好好的，怎么突然报错了？？？经过一系列的排除定位问题，发现可能是因为浏览器版本导致的登陆问题，具体报错如下：方案方案一：更改浏览器默认配置Schemeful Same-Site禁用，设为disabled后，在重新刷新浏览器，没有报错了上述翻译：修改同站点计算，使得具有相同可注册域但不同方案的源被视为跨站点。此更改仅适用于具有“SameSite”属性的 cookie。 – Mac、Windows、Linux、Chrome 操作系统、Android

背景在启动老项目的时候，出现了warning的信息，当然不影响正常使用，但是作为“强迫症”患者，还是忍不住查看原因及解决方案定位原因报错信息比较清晰了，react与eslint-plugin-react包版本不匹配，接下来就可以针对具体问题，查找解决方案了解决方案https://github.com/yannickcr/eslint-plugin-react/issues/2157参考了该issue在.eslintrc文件中添加如下配置信息 "settings": { "react"

有些老项目的包长时间没有更新，导致项目中有些性能问题，在项目迭代中考虑升级包，开始查找相关资料；简单“粗暴”的升级方式当然包升级后带来的一些问题，需要更全面的思考，此处先省略…直接进入主题：npm包升级工具：npm-check-updatesnpm-check在本地执行安装命令如下：npm install -g npm-check-updates// 升级npm包ncu -u对package.json所有的包进行统一升级，执行情况如下：包安装升级完成，但是项目跑不起来。。首先

antd版本升级DatePicker缺省值由undefined变为null问题描述项目中antd版本升级，DatePicker的onChange的date值类型变化3.25.2版本 缺省值为undefined升级3.26.3或着4.XX版本后各事件或的类型为null处理方式好的处理方式：需要更改业务代码中所有默认缺省值，代码改动较大；比较小的影响改动-只更改clear操作相关的当操作clear时，需要业务代码中处理兼容判断...

背景在项目中有的跳转是需要新开页，有些需要在当前页面跳转页面跳转的方式有哪些？window.location(.href) = “”window.location = "http://"'window.location.href = "https//"上面两种方法都是当前页面跳转；不同之处在于 window.location 返回的是对象，如果没有.href，它的默认参数就是hrefwindow.openwindow.open("https://")window.open("https

问题输入框，需要处理onblur事件与onclick事件，在项目中点击button按钮的时候同时也触发了onblur事件解决方法：经过一步步定位问题发现该问题，查找资料后进一步测试问题得以解决，将button的onclick事件更改为onMouseDown...