百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 文章教程 > 正文

源码补丁神器—patch-package

xsobi 2024-11-24 00:30 1 浏览

一、背景

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,修改代码如下:


??

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


??

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

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


??

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 文件

相关推荐

好用的云函数!后端低代码接口开发,零基础编写API接口

前言在开发项目过程中,经常需要用到API接口,实现对数据库的CURD等操作。不管你是专业的PHP开发工程师,还是客户端开发工程师,或者是不懂编程但懂得数据库SQL查询,又或者是完全不太懂技术的人,通过...

快速上手:Windows 平台上 cURL 命令的使用方法

在工作流程中,为了快速验证API接口有效性,团队成员经常转向直接执行cURL命令的方法。这种做法不仅节省时间,而且促进了团队效率的提升。对于使用Windows系统的用户来说,这里有一套详细...

使用 Golang net/http 包:基础入门与实战

简介Go的net/http包是构建HTTP服务的核心库,功能强大且易于使用。它提供了基本的HTTP客户端和服务端支持,可以快速构建RESTAPI、Web应用等服务。本文将介绍ne...

#小白接口# 使用云函数,人人都能编写和发布自己的API接口

你只需编写简单的云函数,就可以实现自己的业务逻辑,发布后就可以生成自己的接口给客户端调用。果创云支持对云函数进行在线接口编程,进入开放平台我的接口-在线接口编程,设计一个新接口,设计和配置好接口参...

极度精神分裂:我家没有墙面开关,但我虚拟出来了一系列开关

本内容来源于@什么值得买APP,观点仅代表作者本人|作者:iN在之前和大家说过,在iN的家里是没有墙面开关的。...

window使用curl命令的注意事项 curl命令用法

cmd-使用curl命令的注意点前言最近在cmd中使用curl命令来测试restapi,发现有不少问题,这里记录一下。在cmd中使用curl命令的注意事项json不能由单引号包括起来json...

Linux 系统curl命令使用详解 linuxctrl

curl是一个强大的命令行工具,用于在Linux系统中进行数据传输。它支持多种协议,包括HTTP、HTTPS、FTP等,用于下载或上传数据,执行Web请求等。curl命令的常见用法和解...

Tornado 入门:初学者指南 tornados

Tornado是一个功能强大的PythonWeb框架和异步网络库。它最初是为了处理实时Web服务中的数千个同时连接而开发的。它独特的Web服务器和框架功能组合使其成为开发高性能Web...

PHP Curl的简单使用 php curl formdata

本文写给刚入PHP坑不久的新手们,作为工具文档,方便用时查阅。CURL是一个非常强大的开源库,它支持很多种协议,例如,HTTP、HTTPS、FTP、TELENT等。日常开发中,我们经常会需要用到cur...

Rust 服务器、服务和应用程序:7 Rust 中的服务器端 Web 应用简介

本章涵盖使用Actix提供静态网页...

我给 Apache 顶级项目提了个 Bug apache顶级项目有哪些

这篇文章记录了给Apache顶级项目-分库分表中间件ShardingSphere提交Bug的历程。说实话,这是一次比较曲折的Bug跟踪之旅。10月28日,我们在GitHub上提...

linux文件下载、服务器交互(curl)

基础环境curl命令描述...

curl简单使用 curl sh

1.curl--help#查看关键字2.curl-A“(添加user-agent<name>SendUser-Agent<name>toserver)”...

常用linux命令:curl 常用linux命令大全

//获取网页内容//不加任何选项使用curl时,默认会发送GET请求来获取内容到标准输出$curlhttp://www.baidu.com//输出<!DOCTYPEh...

三十七,Web渗透提高班之hack the box在线靶场注册及入门知识

一.注册hacktheboxHackTheBox是一个在线平台,允许测试您的渗透技能和代码,并与其他类似兴趣的成员交流想法和方法。它包含一些不断更新的挑战,并且模拟真实场景,其风格更倾向于CT...