前端第三方包打补丁技巧：patch-package工具实战

--- a/node_modules/some-package/lib/index.js
+++ b/node_modules/some-package/lib/index.js
@@ -10,7 +10,8 @@
 function problematicFunction() {
   // 原始有问题的代码
-  return null;  
+  // 修复后的代码
+  return undefined;
 }

# 使用npm
npm install --save-dev patch-package
 
# 使用yarn
yarn add --dev patch-package
 
# 使用pnpm
pnpm add --save-dev patch-package

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

# 在TRAE IDE的搜索框中输入
debounce node_modules/lodash

// node_modules/lodash/debounce.js
function debounce(func, wait, options) {
  // 原始实现
  let timeout;
  
  // 我们的优化：使用更高效的计时器管理
  const optimizedDebounce = function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
  
  return optimizedDebounce;
}

# 基本用法
npx patch-package lodash
 
# 指定输出目录（可选）
npx patch-package lodash --patch-dir patches
 
# 包含创建者信息
npx patch-package lodash --include-author

# 1. 删除node_modules重新安装
rm -rf node_modules
npm install
 
# 2. 检查补丁是否应用成功
npx patch-package --check
 
# 3. 运行测试验证修复效果
npm test

# 一次性为多个包创建补丁
npx patch-package lodash react vue
 
# 或者分别创建
npx patch-package lodash
npx patch-package react

# 进入包的目录
cd node_modules/some-package
 
# 创建diff文件
git diff > ../../patches/some-package+1.0.0.patch

# 1. 升级包版本
npm update some-package
 
# 2. 尝试应用旧补丁（可能失败）
npx patch-package --apply some-package
 
# 3. 如果失败，重新修改并创建新补丁
npx patch-package some-package

// patches/antd+4.24.8.patch
--- a/node_modules/antd/es/button/style/index.less
+++ b/node_modules/antd/es/button/style/index.less
@@ -15,6 +15,10 @@
   &-primary {
     background-color: @primary-color;
     border-color: @primary-color;
+    
+    // 自定义样式增强
+    box-shadow: 0 2px 8px rgba(@primary-color, 0.3);
+    transition: all 0.3s ease;
     
     &:hover {
       background-color: @primary-color-hover;

// patches/vue-router+3.6.5.patch
--- a/node_modules/vue-router/dist/vue-router.common.js
+++ b/node_modules/vue-router/dist/vue-router.common.js
@@ -2345,8 +2345,12 @@
   // 修复导航守卫中的异步处理问题
   function resolveAsyncComponents (matched) {
     return function (to, from, next) {
+      // 添加错误处理
+      try {
       var hasAsync = false;
       var pending = 0;
+      } catch (error) {
+        next(error);
+      }
     }
   }

// patches/moment+2.29.4.patch
--- a/node_modules/moment/src/lib/moment/prototype.js
+++ b/node_modules/moment/src/lib/moment/prototype.js
@@ -45,6 +45,11 @@
 
 // 添加性能监控
 var originalFormat = proto.format;
+var formatCache = new Map();
+ 
 proto.format = function (inputString) {
+  var cacheKey = inputString + this.valueOf();
+  if (formatCache.has(cacheKey)) return formatCache.get(cacheKey);
+  
+  var result = originalFormat.call(this, inputString);
+  formatCache.set(cacheKey, result);
+  return result;
   return originalFormat.call(this, inputString);
 };

patches/
├── lodash+4.17.21.patch          # 基础命名
├── lodash+4.17.21+perf.patch     # 添加描述性后缀
├── 2023-12-01-lodash-hotfix.patch # 时间戳标记
└── issue-123-lodash-fix.patch     # 关联issue编号

## 补丁说明
 
本项目使用patch-package管理第三方库的临时修复：
 
| 补丁文件 | 目标包 | 修复内容 | 创建时间 |
|---------|--------|----------|----------|
| lodash+4.17.21.patch | lodash | 优化debounce性能 | 2023-12-01 |
| antd+4.24.8.patch | antd | 修复Button样式问题 | 2023-12-05 |

# .gitignore配置
# 确保patches目录不被忽略
!patches/
!patches/*.patch

# 查看补丁内容
git diff --cached patches/
 
# 验证补丁语法
npx patch-package --check

{
  "dependencies": {
    "some-package": "~1.2.3"  // 使用~锁定小版本
  }
}

## 依赖升级检查清单
 
- [ ] 检查补丁是否仍然适用
- [ ] 运行完整的测试套件
- [ ] 验证业务功能正常
- [ ] 更新补丁文档
- [ ] 通知团队成员

# 1. 查看补丁差异
git diff patches/some-package+1.0.0.patch
 
# 2. 手动合并冲突
# 3. 重新生成补丁
npx patch-package some-package

// package.json
{
  "scripts": {
    "postinstall": "patch-package --use-yarn",
    "prepare": "patch-package --use-yarn"
  }
}

// 只在必要时应用补丁
const fs = require('fs');
const path = require('path');
 
// 在postinstall脚本中添加条件判断
if (fs.existsSync(path.join(__dirname, 'patches'))) {
  require('child_process').execSync('npx patch-package');
}

// test/patches.test.js
const fs = require('fs');
const path = require('path');
const { execSync } = require('child_process');
 
describe('补丁测试', () => {
  const patchesDir = path.join(__dirname, '../patches');
  
  if (fs.existsSync(patchesDir)) {
    const patches = fs.readdirSync(patchesDir).filter(f => f.endsWith('.patch'));
    
    patches.forEach(patchFile => {
      test(`${patchFile} 应该正确应用`, () => {
        expect(() => {
          execSync(`npx patch-package --check ${patchFile}`, { 
            cwd: path.join(__dirname, '..') 
          });
        }).not.toThrow();
      });
    });
  }
});

// scripts/monitor-patches.js
const fs = require('fs');
const path = require('path');
 
function monitorPatchEffectiveness() {
  const patchesDir = path.join(__dirname, '../patches');
  
  if (!fs.existsSync(patchesDir)) return;
  
  const patches = fs.readdirSync(patchesDir);
  
  patches.forEach(patch => {
    const packageName = patch.split('+')[0];
    const packagePath = path.join(__dirname, '../node_modules', packageName);
    
    if (!fs.existsSync(packagePath)) {
      console.warn(`⚠️  ${packageName} 未安装，补丁可能失效`);
    }
  });
}
 
module.exports = { monitorPatchEffectiveness };

# .github/workflows/test-patches.yml
name: 验证补丁
on: [push, pull_request]
 
jobs:
  test-patches:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
      
      - name: 安装依赖
        run: npm ci
      
      - name: 验证补丁应用
        run: npx patch-package --check
      
      - name: 运行补丁测试
        run: npm run test:patches