一、背景

平时在用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属性限制不符合预期问题，该问题已在后续版本修复了，这里就不具体展开了。

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