避免 node_modules 修改被覆盖：用 patch-package 轻松搞定

在前端开发中，我们偶尔会遇到需要修改 node_modules 依赖包代码的场景 ------ 比如调整组件样式、修复第三方库 bug 等。但这里藏着一个棘手问题：每次执行npm install或yarn install重新安装依赖时，之前手动修改的代码都会被无情覆盖，辛苦调整的内容瞬间归零。

想要解决这个 "修改易丢失" 的痛点，patch-package工具堪称最优解。它能将我们对 node_modules 的修改转化为可复用的补丁文件，并且在依赖安装完成后自动执行补丁，让自定义修改稳定保留，无需每次安装后重复手动调整。

一、patch-package 使用步骤

1. 安装依赖工具

首先在项目中安装patch-package，作为开发依赖使用，执行以下命令即可：

bash

lua 复制代码

# 使用npm安装
npm install patch-package --save-dev

# 若使用yarn，执行此命令
yarn add patch-package --dev

2. 手动修改目标依赖代码

找到 node_modules 中需要调整的文件（例如某 UI 组件的源码文件node_modules/uv-ui/components/button/button.vue），按照业务需求直接修改代码 ------ 无论是调整逻辑、修改样式还是修复 bug，都可以像修改本地文件一样操作。

3. 生成专属补丁文件

修改完成后，执行命令生成补丁（注意将命令中的 "xxx" 替换为你实际修改的依赖包名称，比如 "uv-ui"）：

bash

go 复制代码

npx patch-package xxx

执行成功后，项目根目录会自动创建一个patches文件夹，里面会生成以 "包名 + 版本号.patch" 命名的文件（例如@climblee+uv-ui+1.1.20.patch），这个文件完整记录了你的修改内容，相当于给依赖包打了一个 "专属补丁"。

4. 配置自动应用补丁

为了让每次安装依赖后都能自动触发补丁，需要在package.json的scripts字段中添加postinstall命令：

json

json 复制代码

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

这里无需手动执行postinstall，因为 npm 或 yarn 会在npm install/yarn install命令执行完毕后，自动运行这个脚本，将patches文件夹中的补丁应用到新安装的依赖中，确保修改不丢失。

二、注意事项

锁定依赖版本 ：如果后续升级了被修改的依赖包（比如从 1.1.20 升级到 1.1.21），之前生成的补丁会失效，因为新版本的代码结构可能已变化。建议在package.json中锁定该依赖的版本，避免意外升级导致补丁失效。
控制修改范围 ：若对依赖包的修改内容过多（比如重构核心逻辑、新增大量功能），不建议使用patch-package。这种情况下，更推荐 fork 原依赖包到自己的仓库，在仓库中维护自定义版本，再通过 npm/yarn 安装自己仓库的依赖包，这样更便于长期维护。