patch-package 补丁

前言

为什么要用到补丁呢？
开发中，可能会经常遇到一种情况，使用npm安装了一个第三方的库，但是库里面的某一段代码有问题，或者是符合实际需求，需要进行修改；但是修改完后，只能我自己用，其他同事开发的时候，还需要再去修改一遍，非常的麻烦，还容易出错。
而补丁神器patch-package应用而生，它能帮助我们在正常安装某个 npm 依赖的情况下，通过在项目里增加一个补丁文件，就可以将对这个 npm包的修改持久保存到项目中。这样就能实现针对开源库的 bug 修复直接应用到项目中。

一、npm 安装补丁

• 安装patch-package

npm install patch-package

• 修改node_modules里某个包的源代码
  我这里以axios为例子

  function ownKeys(e, r) {
    // 增加一个输出
    console.log('======', e, r)
    var t = Object.keys(e);
    if (Object.getOwnPropertySymbols) {
      var o = Object.getOwnPropertySymbols(e);
      r && (o = o.filter(function (r) {
        return Object.getOwnPropertyDescriptor(e, r).enumerable;
      })), t.push.apply(t, o);
    }
    return t;
  }

• 生成补丁

npx patch-package axios

其中axios是我们需要创建补丁的库。
补丁创建成功后，会在项目的根目录下生成一个补丁文件夹patches，文件夹下有我们刚生成的补丁文件axios+1.6.8.patch

效果

• 添加自动执行命令package.json

  "scripts": {
    ....
    "postinstall": "patch-package" // 自动执行命令
  },

• 测试：删除node_modules文件夹，重新执行npm install，发现：
  
  效果

二、pnpm安装补丁

如果使用pnpm管理三方库，是不能安装补丁的，执行 npx patch-package heatmap.js时会报错：

**ERROR** No package-lock.json, npm-shrinkwrap.json, or yarn.lock file.

You must use either npm@>=5, yarn, or npm-shrinkwrap to manage this project's
dependencies.

但是可以使用其他办法：

1、使用已经生成的补丁

• 使用其他的包管理器（例如npm）生成补丁

• 在根目录下创建patches文件夹，并且将补丁复制到该文件夹下
  

  效果

• 添加自动执行命令package.json

2、脚本

原理：将修改后的源码文件复制出来，放到项目里，在每次执行pnpm install安装依赖之后，使用脚本将修改后的文件复制到源码目录，覆盖掉源代码，实现修改代码的目的。

• 将修改后的三方库源码文件复制到patches文件夹下
  
  源码文件
• 在项目中创建一个脚本postinstall.js，在脚本中实现代码覆盖

import fs from 'node:fs';

copyFileSync(
  './patches/heatmap.js/heatmap.js',
  './node_modules/heatmap.js/build/heatmap.js',
);

function copyFileSync(source, target) {
  let targetFile = target;

  // If target is a directory, a new file with the same name will be created
  if (fs.existsSync(target) && fs.lstatSync(target).isDirectory()) {
    targetFile = path.join(target, path.basename(source));
  }

  fs.writeFileSync(targetFile, fs.readFileSync(source));
}

• 添加自动执行脚本命令package.json

  "scripts": {
    ......
    "postinstall": "node scripts/postinstall.js" // 自动执行命令
  },