使用 patch-package 优雅地修改第三方依赖库

在前端开发中，有时我们需要对第三方依赖库进行修改以满足项目需求。然而，直接修改 node_modules 中的文件并不是一个好方法，因为每次重新安装依赖时这些修改都会丢失。patch-package 是一个优秀的工具，可以帮助我们优雅地管理这些修改。

本文将介绍如何使用 patch-package 修改 element-plus 的代码，并将修改保存为补丁文件。

---

初始化vue工程，安装element-plus

npm create vue@latest
npm install element-plus --save
//省略：修改main.ts入口引入element-plus

修改app.vue

<template>
  <main>
    <!-- <TheWelcome /> -->
    <el-button>默认的el-button颜色</el-button>
  </main>
</template>

初始效果：

安装 patch-package

首先，确保你的项目已经使用 npm 或 yarn 初始化。然后安装 patch-package：

npm install patch-package --save-dev

或者使用 yarn：

yarn add patch-package --dev

接着，在 package.json 的 scripts 中添加以下命令：

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

这样，每次运行 npm install 或 yarn install 时，patch-package 都会自动应用补丁。

---

修改 element-plus

假设我们需要修改 element-plus 中的某个组件行为。以下是具体步骤：

1. 找到需要修改的文件

在 node_modules/element-plus 中找到需要修改的文件。例如，我们需要修改 ElButton 组件的样式文件 node_modules/element-plus/dist/index.css。

2. 修改文件

直接编辑目标文件，完成你需要的修改。例如，将按钮的默认背景颜色改为红色：

/* 修改前 */
.el-button {
  color: var(--el-button-text-color);
}

/* 修改后 */
.el-button {
   color: #ff0000;
}

注意我这里需改的是dist里的文件，如果你修改了lib下的component等内容，需要查询打包element-plus才会生效

3. 生成补丁文件

修改完成后，运行以下命令生成补丁文件：

npx patch-package element-plus

• npx 是用来临时调用项目中安装的 CLI 工具的命令，而 npm 是用来管理依赖的工具。

运行成功后，patch-package 会在项目根目录下生成一个 patches 文件夹，其中包含 element-plus+<version>.patch 文件。

---

验证补丁

删除 node_modules 并重新安装依赖：

rm -rf node_modules
npm install
npm run dev

安装完成后，patch-package 会自动应用补丁。检查 node_modules/element-plus 中的文件，确认修改已生效。

---

页面效果：

再次修改补丁

如果需要对已经生成补丁的依赖库进行进一步修改，可以按照以下步骤操作：

1. 还原补丁：在修改前，确保当前补丁已应用到 node_modules 中。如果未应用，可以运行 npm install 或 yarn install。
2. 修改文件：直接编辑 node_modules 中的目标文件，完成新的修改。
3. 重新生成补丁：运行以下命令覆盖原有补丁文件：

   npx patch-package element-plus
   

   这样，新的补丁文件会替换旧的补丁文件。

---

替代方案

除了使用 patch-package，还有以下替代方案可以考虑：

1. Fork 仓库并发布到私有 npm 仓库：

   • Fork 第三方库的代码仓库到自己的代码仓库。
   • 在 Fork 的仓库中进行修改。
   • 将修改后的代码发布到私有 npm 仓库（如 Nexus、Verdaccio）。
   • 在项目中使用私有仓库中的依赖。·

2. 贡献代码到社区：

   • 如果修改内容具有通用性，可以考虑向第三方库的官方仓库提交 Pull Request (PR)。
   • 通过社区审核后，修改会被合并到官方版本中，后续直接使用官方版本即可。

---

通过 patch-package 或其他替代方案，我们可以灵活地管理对第三方库的修改，确保项目的稳定性和可维护性。希望本文对你有所帮助！