关于前端:手动修改-nodemodules-中的依赖包patchpackage

背景

首先，问题是这样产生的，在我的项目中应用 pdfvuer 第三方插件，要将曾经盖章胜利的 pdf 显示进去，这个时候发现文章能够好好的显示进去，然而公司的签章怎么也显示不进去，这个时候终于找到了解决办法！！然而显示签章的批改代码在依赖包 node_modules 门路下，毕竟批改在 node_modules 下的文件每次 npm install 都须要手动批改。霎时我就开始好受了，好受难归好受但还是要想方法解决滴

起初想到的计划有两种：

1. fork 他人的代码到本人仓库，批改后，从本人仓库装置这个插件。
2. 下载他人代码到本地，放在 src 目录，批改后手动引入。这样做也有很多不便，比方本人独自封装组件既繁琐又耗时，而且还会造成我的项目看起来比拟臃肿。

然而无论是下面哪种方法都太简单了，我就改了某一个文件了一两行代码，却要如此臃肿的 copy 整个我的项目，最初可能本人都忘了批改了哪里，而且更新麻烦，咱们每次都须要手动去更新代码，无奈与插件同步更新。
在这种状况下我转头又开始了我的求知之路。。。而后我就发现了一个高大上的解决方案用 patch-package 批改 node_modules 中的依赖包。

解决方案

1. 通过命令装置 patch-package
   npm install patch-package --save-dev
2. 批改我的项目根目录下的 package.json 文件
   在 package.json 文件中的 scripts 中退出 “postinstall”: “patch-package”
   
3. 手动批改 node_modules 依赖包中的源码
   
4. 手动执行命令创立 npx patch-package package-name 补丁文件
   npx patch-package package-name
   其中 package-name 是指要进行批改的依赖包名称。执行该命令后会在我的项目根目录中主动创立一个 patches 文件夹，该文件夹中就会呈现一个 package-name+version.patch 的补丁文件。如图：
   
   举个示例：我要批改 pdfjs-dist 下的文件 因而我所执行的命令就是：npx patch-package pdfjs-dist
   
5. 测试补丁包是否无效
   手动删除我的项目中的 node_modules 文件（强制删除 node_modules 文件夹：rimraf node_modules），并从新执行 npm install 命令装置 node_modules 依赖包。装置胜利后查看你之前批改的 node_modules 依赖包中的文件，查看你批改的代码是否仍然存在，如果之前批改代码仍然存在即表明补丁文件曾经失效，如果你之前批改的代码不存在即表明补丁文件没有失效。