记录遇到过的npm包的问题以及可以使用patch-package解决问题的一些场景

一、背景

平时在用npm包时,多少会遇到有些npm包不符合预期,或者包本身功能缺陷等问题,然后一查就是要改npm包源码,而且有的时候靠升级最新的包也没有解决问题。因此就有了patch-package的用武之地。

这里我们不讲patch-package的具体用法,具体用法可以看我上一篇的文章:

juejin.cn/post/734008...

这里我们具体来举例几个我遇到过的npm包的问题,也就是可以使用patch-package解决问题的一些场景:

二、场景(以下场景只说明问题说在,具体实现见上文链接)

1、pdfjs-dist不显示签章问题

pdfjs-dist在2.0.489这个版本的时候,遇到签章会不会显示,如下图:

具体问题主要是包里面会把签章sig的内容给隐藏掉,因此只要在源码里删掉如下这几行代码就行

2、domtoimage执行截图后,图片模糊问题

(1)前端dom生成图片的两大工具,domtoimage和htmltocanvans,其中htmltocanvans图片非常清晰,但是如果页面内容过多会引起卡顿的问题,具体解决方法请看我之前发布的文章:

juejin.cn/post/733162...

(2)下面我们来看domtoimage模糊的原因和解决方法:

原因:大概是canvas中原像素因为没有与物理像素的统一导致其中原像素点与设备像素产生偏差。现象如下图,左侧是domtoimage生成的:

解决的方法:修改npm包里的domtoimage,使canvas适配设备宽高

在文件中搜索draw方法,然后将最后一次回调返回canvas的部分修改成如下就行:

ini 复制代码
function (image) {
     var canvas = newCanvas(domNode);
     let context = canvas.getContext('2d');
     const ratio = window.devicePixelRatio || 1;
     canvas.width *= ratio;
     canvas.height *= ratio;
     context.scale(ratio, ratio);
     context.drawImage(image, 0, 0);
     return canvas;
}

3、postcss-px-to-viewport配置横屏参数landscape: true,控制台报错postcss.atRule is not a constructor

有些前端需求需要我们横屏显示,而横屏也需要不同页面的适配,就像iphone6宽度750px转成100vw显示一样,而我们经常用的工具就是postcss-px-to-viewport,而其中就有配置横屏参数landscape,如下图:

此时配好参数后会发现,控制台报错postcss.atRule is not a constructor,实际就是源代码里那个at大小写的问题,只要at改成大写就行,而这个问题在最新版也没有修改过来,截图如下:

4、pdfjs-dist部分页面花屏问题

pdfjs-dist会存在部分页面花屏问题,如下图:

解决方法可以是升级最新的包,或者直接改npm包:

找到pdf.worker.js文件,在 precinct.zeroBitPlanesTree = zeroBitPlanesTree下面加上以下代码即可:

csharp 复制代码
for (var l = 0; l < layerNumber; l++) {
    if (readBits(1) !== 0) {
         throw new JpxError("Invalid tag tree");
    }
}

总结

patch-package确实给我们带来了极大的便利,因为平时使用的npm包也都是程序员们写的,总会有这个那个问题,或者没有达到预期效果,需要改源码的场景,以上就是我遇到过的需要patch-package解决的问题,当然还有很多其他的场景也可以用的到,比如antd的Input.TextArea组件maxLength属性限制不符合预期问题,该问题已在后续版本修复了,这里就不具体展开了。

相关推荐
会豪38 分钟前
Electron-Vite (一)快速构建桌面应用
前端
中微子41 分钟前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶42 分钟前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子43 分钟前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_1 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_23331 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin1 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js
遂心_2 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
Moonbit2 小时前
MoonBit 正式加入 WebAssembly Component Model 官方文档 !
前端·后端·编程语言
龙在天2 小时前
ts中的函数重载
前端