摘要：文章以解决前端开发中 npm 包的 bug 问题为背景，详细介绍了使用 patch-package 给 npm 包打补丁的方法，包括安装、修改、生成补丁、加入版本管理、完善 npm 脚本等步骤，并对比了其他修改 npm 包的方式，记录、总结开发过程中遇到的问题。
关键词：patch-package node_modules 源码修改
一、项目场景：
有这样一种场景：如果你在开发过程中，发现某个npm包有Bug，应该怎么办？
二、问题描述：
例如在做项目中的富文本需求时，因为一些定制的内容需要修改到node_modules中的源码，思考修改方案有三种：
- fork别人的代码到自己仓库，修改后，从自己仓库安装这个插件。
- 下载别人代码到本地，放在src目录，修改后手动引入。这样做也有很多不便，比如自己单独封装组件既繁琐又耗时，而且还会造成项目看起来比较臃肿。
- 使用patch-package
因为前两种的方式都比较的复杂，并且会导致项目比较臃肿，更加容易忘记自己修改了源码的那个部分，出了问题应该如果恢复的问题，而且更新麻烦，我们每次都需要手动去更新代码，无法与插件同步更新，所以最后选择使用patch-package。
三、解决方案：
安装 patch-package
1：安装patch-package
npm i patch-package --save-dev
2：修改npm包
为了方便理解，下面简单列举element-ui alert组件的修改：
3：生成补丁文件
npx patch-package package-name
本例子：npx patch-package element-ui
生成补丁，会在文件目录中生成一个patches文件夹，如下：
tips： .patch文件是个什么东东，打开文件一目了然，其实就是一些git diff记录描述，补丁原理呼之欲出 —— patch-package会将当前node_modules下的源码与原始源码进行git diff，并在项目根目录下生成一个patch补丁文件。
4：加入版本管理
至此补丁文件已经生成完毕，我们需要将它提交到git中，直接执行常规git操作即可
5：完善npm脚本
当其他同事拉到代码如何应用补丁呢？基于上述操作我们在npm install后执行patch-package命令即可，这个流程可借助npm script实现，在package.json的script中添加如下字段及内容：
"postinstall": "patch-package"
6：验证补丁是否生效
手动删除项目中的node_modules，并重新执行npm install命令安装依赖包。安装成功后查看之前修改的 node_modules 依赖包中的文件，查看修改的代码是否依然存在，如果之前修改代码依然存在即表明补丁文件已经生效，如果你之前修改的代码不存在即表明补丁文件没有生效
四、总结
- 直接修改 node_modules 下的代码不是被推荐的做法，应该仅在应急情况下考虑
- 长期还是需要彻底修复第三方包缺陷并逐步移除项目中的 .patch 文件
- 这种场景在日常开发中还是比较常见的，这里为大家提供一种思路，在开发过程中发现npm包的Bug，首先向原作者提交issue或Fork代码修改后提交合并请求。但遇到不活跃或拒绝修改的情况，项目等待时间会很长。这时可以使用补丁方案或换日方案进行解决。
