patch-package 给 npm 包打补丁

前言

本文从实际遇到的问题出发，使用 patch-package 如何给 npm 包打补丁。

遇到的问题

使用 react-pdf 时，版本4.2.0，在预览某pdf时，pdf上的盖章看不见

解决方案

注释掉 pdfjs-dist 下 build/pdf.worker.js 的代码

if (data.fieldType === 'Sig') {
    data.fieldValue = null;

    _this2.setFlags(_util.AnnotationFlag.HIDDEN);
}

那想要修复类似这样的问题，有几种方案

1. 将源码拉下来修改代码推送到私有仓库
2. 升级版本（如果在新版本有修复你的问题）
3. 使用 patch-package

每个的优缺点就不说了，如果对源码改动不大并且想快速解决问题，使用 patch-package 是性价比最高的

使用 patch-package

如上文，我们就解决这个问题当作示例

1. 首先要安装 patch-package
2. 直接跑到 node_modules 改源码
3. 执行 npx patch-package xxx 你改的包，这里是 npx patch-package-pdfjs-dist
   
4. 可以看到项目里多了一个patch
   

5. 在 package.json 加入

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

postinstall 是 npm/yarn 的生命周期钩子，在 npm install 或 yarn install 完成后自动执行，确保每次 install 会执行 patch-package

pnpm 自带 patch

pnpm 是自带 patch 功能的，具体流程如下：

1. 首先执行

   pnpm patch 你要修改的包
   
   # 如果是上面的例子就是
   pnpm patch pdfjs-dist@2.1.266

   
2. 然后 pnpm 会返回一个临时目录路径，例如：/xxx/…/node_modules/pdfjs-dist
3. 在返回路径的文件手动修改代码
4. 提交补丁，执行第一步返回的提示命令

   pnpm patch-commit 路径xxx

   这样补丁会在每次 pnpm install 时自动应用