在前端开发中，有时我们需要对第三方依赖库进行修改以满足项目需求。然而，直接修改
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 中的文件，确认修改已生效。
页面效果：
再次修改补丁
如果需要对已经生成补丁的依赖库进行进一步修改，可以按照以下步骤操作：
- 还原补丁：在修改前，确保当前补丁已应用到
node_modules中。如果未应用，可以运行npm install或yarn install。 - 修改文件：直接编辑
node_modules中的目标文件，完成新的修改。 - 重新生成补丁：运行以下命令覆盖原有补丁文件：
这样，新的补丁文件会替换旧的补丁文件。npx patch-package element-plus
替代方案
除了使用 patch-package，还有以下替代方案可以考虑：
-
Fork 仓库并发布到私有 npm 仓库：
- Fork 第三方库的代码仓库到自己的代码仓库。
- 在 Fork 的仓库中进行修改。
- 将修改后的代码发布到私有 npm 仓库（如 Nexus、Verdaccio）。
- 在项目中使用私有仓库中的依赖。·
-
贡献代码到社区：
- 如果修改内容具有通用性，可以考虑向第三方库的官方仓库提交 Pull Request (PR)。
- 通过社区审核后，修改会被合并到官方版本中，后续直接使用官方版本即可。
通过 patch-package 或其他替代方案，我们可以灵活地管理对第三方库的修改，确保项目的稳定性和可维护性。希望本文对你有所帮助！
