在前端开发中，我们经常会遇到需要修改npm包代码的场景。可能是遇到了一个bug，或者需要一个新的feature。本文将介绍如何优雅地解决这个问题。

传统解决方案及其局限

最常见的两种方案是：

• 直接修改node_modules中的代码 - 这种方法简单直接，但每次部署都需要手动更新。虽然可以通过自动化脚本来解决，但并不够优雅。
• fork原仓库并发布自己的版本 - 这是一种更规范的方案，同时可以给原作者提交PR。但如果只是想改动一两行代码，这种方式的成本显然过高。

patch-package：优雅的解决方案

社区提供了一个更优雅的解决方案：patch-package。它提供了一个自动化的修改流程：

1. 直接在node_modules中修改目标代码
2. 运行npx patch-package <pkg>生成补丁文件，它会自动比对源代码和修改后的代码，生成git-diff格式的patch文件
3. 在package.json的postinstall钩子中添加npx patch-package，这样每次安装依赖时都会自动应用这些patch文件

这种方案既保持了修改的简便性，又解决了持久化的问题，是一个非常实用的开发技巧。

pnpm patch: 更现代的补丁方案

随着pnpm包管理器的流行，它也提供了原生的patch功能，使用方式更加简单：

1. 运行pnpm patch <pkg-name>;，pnpm会将包解压到一个临时目录并打开编辑器
2. 修改完成后，运行pnpm patch-commit <temporary-path>;生成patch文件
3. 在package.json中添加pnpm patch配置，确保每次安装时应用补丁：

{
  "pnpm": {
    "patchedDependencies": {
      "package-name@version": "patches/[email protected]"
    }
  }
}

相比patch-package，pnpm的patch功能更加集成和简洁，不需要额外安装依赖包，是一个更现代的选择。

两种方案各有特点，可以根据项目使用的包管理器来选择。如果你使用pnpm，建议使用其内置的patch功能；如果使用npm或yarn，则可以选择patch-package。