patch-package使用详解

patch-package的使用方法

1. 安装

首先，你需要在项目中安装 patch-package 和 postinstall-postinstall （后者用于确保每次安装依赖时都会应用补丁）。在项目根目录下执行以下命令：

npm install patch-package postinstall-postinstall --save-dev
// 或者使用 yarn
yarn add patch-package postinstall-postinstall --dev

2. 修改依赖包代码

当你发现某个第三方依赖包存在问题，并且需要临时修改其代码时，可以直接在 node_modules 目录下找到对应的包，然后修改其中的代码文件。

3. 生成补丁文件

修改完依赖包代码后，在项目根目录下执行以下命令来生成补丁文件:

npx patch-package <package-name>
// 例如修改了 react 包，命令如下
npx patch-package react

补丁文件都存放在patches文件夹下，补丁文件以包名+版本号.patch命名，满足了相同依赖包不同版本也可以应用。

4. 配置package.json

为了确保每次安装依赖时都会自动应用补丁，需要在 package.json 中添加 postinstall 脚本：

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

postinstall 是 npm 和 yarn 等包管理工具支持的生命周期脚本。当执行 npm install 或者 yarn install 命令完成依赖安装之后，会自动触发 postinstall 脚本。

5. 共享补丁

如果你使用版本控制系统（如 Git），可以将 patches 文件夹提交到仓库中，这样团队其他成员在安装依赖时也会自动应用这些补丁。

patch-package的原理

1. 生成差异文件（diff）

当你执行 npx patch-package <package-name> 命令时， patch-package 会将修改后的 node_modules 中的包文件与原始的包文件进行比较，使用 diff 算法生成一个差异文件（ .patch 文件）。这个差异文件记录了从原始文件到修改后文件的所有更改，包括新增、删除和修改的行。

2. 应用补丁（patch）

当执行 postinstall 脚本中的 patch-package 命令时， patch-package 会读取 patches 文件夹下的所有 .patch 文件，并使用 patch 工具将这些差异应用到 node_modules 中的对应包文件上。这样，每次安装依赖后，修改后的代码就会自动生效。

通过这种方式， patch-package 提供了一种简单而有效的方法来临时修改第三方依赖包的代码，而无需等待包作者发布新版本。