【工程化】记给ant-design-vue打补丁的示例

一、为什么需要打补丁？

场景

当官方库缺少某个功能（如：Tree组件的draggable属性不支持函数形式），但你又需要立即使用时。

解决方案对比

方案	优点	缺点	适用场景
等官方更新	无维护成本	等待时间长	不紧急的功能、库还有人维护
Fork源码	完全控制	维护成本高	长期大量修改
打补丁	快速、可逆、团队友好	版本升级需更新	紧急功能添加

你的修改流程：

javascript 复制代码

1. 直接编辑 node_modules/ant-design-vue/.../Tree.js
2. 运行 npx patch-package ant-design-vue
3. 生成 patches/ant-design-vue+4.x.patch
4. 配置 postinstall 脚本

团队成员流程：

javascript 复制代码

1. git clone 你的项目
2. npm install
3. 自动运行 postinstall → patch-package
4. 自动应用补丁到他们的 node_modules

二、准备工作

安装工具 patch-package

javascript 复制代码

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

# 如果使用 yarn 1.x
yarn add --dev patch-package postinstall-postinstall

查看要修改的库

javascript 复制代码

# 查看库的版本
npm list ant-design-vue

# 查看源码位置
ls node_modules/ant-design-vue/es/tree/

三、打补丁完整流程

步骤1：分析源码结构

步骤2：直接修改 node_modules
步骤3：生成补丁文件

javascript 复制代码

# 生成补丁
npx patch-package ant-design-vue

# 输出结果：
# ✓ Created patches/ant-design-vue+4.x.patch

会生成一个patches文件夹，里面记录了对库修改的代码变更记录

patches/ant-design-vue+4.x.patch 内容示例：

javascript 复制代码

diff --git a/node_modules/ant-design-vue/es/tree/Tree.js b/node_modules/ant-design-vue/es/tree/Tree.js
index abc123..def456 100644
--- a/node_modules/ant-design-vue/es/tree/Tree.js
+++ b/node_modules/ant-design-vue/es/tree/Tree.js
@@ -36,7 +36,7 @@ export const treeProps = () => {
     // ... 其他属性
-    draggable: booleanType(),
+    draggable: someType([Boolean, Function]),
     // ... 其他属性

步骤4：配置自动应用

在 package.json 中添加：

javascript 复制代码

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

四、验证补丁

删除node_modules，然后重新安装依赖，然后看重新安装后的源码是否为变更后版本，若是，则补丁生效。

javascript 复制代码

rm -rf node_modules package-lock.json
npm install
npm run dev