源码补丁神器—patch-package

京东云开发者
• 阅读 300

一、背景

vue项目中使用 vue-pdf 第三方插件预览pdf,书写业务代码完美运行,pdf文件内容正常预览无问题。后期需求有变,业务需求增加电子签章功能。这个时候pdf文件的内容可以显示出来,但是公司的电子签章无法显示。这令人沮丧,因为已经编写了许多特定于此依赖项的代码,如果替换依赖库,这些代码很可能会被浪费。更重要的是其已经在生产环境运行。

在不更改依赖库进行大改动的前提下,先查找问题所在。经查发现此为官方bug 无法显示签章。进一步查询发现根源是其依赖包 pdf.js电子签章不显示

问题已定位到,要修改显示电子签章的代码是在node_modules的依赖包中。

如何解决此问题?

二、常用方法

1. 给依赖包提 issue 等待他人修复并发布

2. 给依赖包提 pr 自行修复并等待发布

3. 整体copy项目法

直接引用法

直接copy依赖包的源码,本地引用,不再通过npm包方式引用

发布私库法

适合多项目中使用同一个依赖包的场景,可以把修改后的源码发布到私有的仓库上

4. 修改引用法

配置一个webpack alias别名,如'原始文件的引用路径': '修改后文件的引用路径',使得最终修改后的文件被引用,如:

resolve: {  
    alias: {  
        'pdfjs': path.resolve(__dirname, './patched/pdfjs/*'), 
    }
}

以上方法均有弊端:

前两种修复周期很长且依赖第三方,修复时间不定,不适合解决当前问题。

后几种方法都比较复杂,并且会导致项目臃肿,更容易忘记自己修改了源码的哪个部分,而且更新麻烦,每次都需要手动去更新代码,无法与插件同步更新。

有没有一种方法,可以优雅修改node_modules的源码?

三、patch-package

patch-package 让程序开发者立即修复并保留 npm 依赖项。是一个给依赖项打补丁的完美方案。

# fix a bug in one of your dependencies
vim node_modules/some-package/brokenFile.js

# run patch-package to create a .patch file
npx patch-package some-package

# commit the patch file to share the fix with your team
git add patches/some-package+3.14.15.patch
git commit -m "fix brokenFile.js in some-package"

使用方法:

1.安装

npm i patch-package

如果你不需要在生产中运行

npm i patch-package --save-dev

yarn、pnpm、docker安装命令可查看其 git官网。

2. 修改npm包

更改node_modules 文件夹中要修改依赖包的文件

3. 生成补丁

npx patch-package package-name

4. 添加自动执行命令

In package.json

 "scripts": {
    +  "postinstall": "patch-package"
 }

在本文示例中,在node_modules找到要修改的依赖包pdfjs-dist,修改代码如下:

源码补丁神器—patch-package

执行npx patch-package pdfjs-dist,生成补丁,会在文件目录中生成一个patches文件夹,如下:

源码补丁神器—patch-package

至此项目中的bug已修复,如何让更改内容在团队其他同事拉取代码后执行?

添加自执行命令如下,会在 npm install 后知执行。

源码补丁神器—patch-package

patch文件是什么?

其实就是一些git diff记录描述。

原理: patch-package会将当前 node_modules下的源码与原始源码进行 git diff,并在项目根目录下生成一个patch补丁文件。

如何自测补丁是否生效?

手动删除项目中的node_modules,并重新执行npm install命令安装依赖包。安装成功后查看之前修改的 node_modules 依赖包中的文件,查看修改的代码是否依然存在,如果之前修改代码依然存在即表明补丁文件已经生效,如果你之前修改的代码不存在即表明补丁文件没有生效。

四、patch-package 好处

版本预检

当依赖项发生更改时,会以红色大写字母通知,需要检查所做修复是否仍然有效。npx patch-package 会直接报错**ERROR** Failed to apply patch for package xxxx at path,通过提示可以更方便定位问题。

节省空间

无需拷贝一份源码,使用git diff来记录补丁更节省空间,安全又便捷。

可审查

补丁可以作为正常审查过程的一部分进行审查。

五、注意事项

◦直接修改 node_modules 下的代码不是被推荐的做法,应该仅在应急情况下考虑

◦长期还是需要彻底修复第三方包缺陷并逐步移除项目中的 .patch 文件

作者:京东保险 张洁

来源:京东云开发者社区 转载请注明来源

点赞
收藏
评论区
推荐文章
good123 good123
3年前
PDF转WORD为什么是历史难题
PDF转Word是一个非常非常普遍的需求,可谓人人忌危,为什么如此普遍的需求,却如此难行呢,还得看为什么会有这样的一个需求:PDF文档遵循iOS32000的规范是由Adobe公司推出的文档格式,之所以应用如此广泛,是因为PDF精确定位了每个字符的坐标、根据坐标绘制的各种形状,使用PDF格式传输和打印文档可以保证格式的一致性,然后很多PDF文件是可用于阅
昔不亏 昔不亏
3年前
「Vue — 插件」PDF预览vue-pdf
样式如图:1:npminstallsavevuepdf2:在需要使用的页面中js<divclass"page"{{currentPage}}/{{pageCount}}</div<divclass"pdf"<span@click"changePdfPage(0)"class"arrow":class"{g
Stella981 Stella981
3年前
Adobe Acrobat XI Pro破解版 v11.0.10中文版
安装包下载地址:百度网盘Windows软件破解软件AdobeAcrobat一款是专门的PDF工具,它和AdobeReader(同公司的PDF阅读工具)不同,除了阅读以外还支持创建、编辑和保护PDF文件,软件可以帮助您快速、自信地实现将内容数据转换为或扫描至PDF,包括纸质文档、电子邮件、照片和电子表格等等。使用AdobeAcrobat可以在
Wesley13 Wesley13
3年前
Java向PDF模板写入数据
项目需要生成PDF文件,在浏览器实现打印功能。这里只说明如何利用PDF文件模板写入数据整个写入过程我分11步演示,演示过程中的PDF文件我打了马赛克(显示的PDF是公司项目文件),但不影响演示过程。首先安装Adobe AcrobatDC。下载地址:https://pan.baidu.com/s/1BxjHtK5zAWBBsrOGZbEtdw1.
Easter79 Easter79
3年前
Vue PDF文件预览vue
  最近做项目,遇到预览PDF这个功能,在网上找了找,大多推荐的是pdf.js,不过在Vue中还是想偷懒直接npm组件,最后找到了一个还不错的Vuepdf组件,GitHub地址:https://github.com/FranckFreiburger/vuepdfreadme不过一般GitHub上的注释比较简洁,所以这里把自己实际使用的过程总结了
Stella981 Stella981
3年前
PDF组件Spire.PDF 教程:在C#中显示PDF文件的打印预览
本文演示如何使用Spire.PDF(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.evget.com%2Fproduct%2F3377%2Fdownload)和c#在Windows窗体应用程序中显示PDF文件的打印预览。在使用下面的代码之前,我们需要创建一个Windows窗
秋桐 秋桐
1年前
如何通过Java压缩PDF文档
PDF文档在日常工作中应用广泛,经常用于保存公司文件,电子图书或网络资料等大篇幅内容。然而,内容过多往往也会导致PDF文件过大,不便于其保存和发送。在这种情况下,我们可以选择使用FreeSpire.PDFforJava压缩PDF文件。这一方法主要通过压缩文件内的图片、不需要的注释行和空格等来压缩文件大小,以此节约储存空间,减少文件传送时间。以下是具体的操作步骤。
秋桐 秋桐
1年前
如何通过Python代码旋转PDF页面
日常处理PDF文档时,我们时常会遇到页面颠倒、很难正常阅读或打印的情况。在这种情况下,我们可以通过旋转页面来调整文档的方向。旋转时,也可以根据具体情况,选择顺时针或逆时针旋转特定的角度,以使页面内容更加清晰可读或适应特定的显示需求。这一功能可以通过PDF处理工具或者库来实现。这篇文章将介绍如何使用PDF库在Python平台上旋转文档页面。
京东云开发者 京东云开发者
8个月前
移动端提高pdf预览清晰度
背景:移动端预览PDF文件,通用的解决方案是使用vuepdf插件,其内置pdf.js,原理是基于HTML5的标签,通过将PDF文件转换为图片或来实现对PDF文件的预览,插件好使没毛病😆,但是如果我们的需求是要在移动端预览内容很密集的文件时,预览效果就不理
下载就永久免费的日常软件,PDF,图片编辑,手机清理软件
日常学习,办公经常会使用pdf,图片编辑,手机清理软件,这些软件在需要时候很难找到合适,PDF有各种需求,格式转换,编辑,样式调整,解密等等,为了更高效地处理PDF文件和图片编辑,推荐使用一款全能的PDF和图片编辑软件。这种软件功能强大,支持各种格式的文件