如何为npm包打补丁

我们在开发中经常遇到，npm包有点小问题或者不符合我们的场景。

通常的解决方案，是提交一个issue或者PR，等待作者修改，又或者copy源码到本地，修改依赖指向本地。

这两种方案，都有明显的缺点，不是等待时间太久，就是太过暴力。

这里推荐一个新的方案：patch-package

 

patch-package适用于对npm包简单的修改，它能在不copy源码修改依赖的前提下，将修改记录下来，利用git进行管理，保证修改在组内小伙伴间一致。

通过npm scripts集成，可以无感的使用，效果不错，成本较低。

话不多说，上demo：

0、准备

首先，当然是安装patch-package，按照文档说明来，装devDependencies就好了

yarn add patch-package --dev

1、栗子生成

这里拿lodash.clonedeep 这个包来做一下实验

找到cloneDeep函数，增加一行console.log

2、补丁生成

然后执行命令生成补丁，格式是这样滴 npx patch-package 【包名】，还有其他复杂参数，参考文档自行选用

npx patch-package lodash.clonedeep

 

如图所示，生成成功了，提示我们说，Created file patches... blabla 

查看一下目录下的patches文件夹，如下图所示，生成了lodash.clonedeep+4.5.0.patch文件

文件描述了我们修改了什么，第几行，和git的记录类似。

 

 3、补丁还原

补丁生成好了，接下来就是还原，我们首先将lodash.clonedeep包内的修改还原。

 

然后，使用 命令还原我们的修改。

 npx patch-package

执行完后，再查看文件内容，会发现我们的修改已经回来了。

 

 将代码跑起来，会发现我们的修改确实应用了。

 

4、传播与集成

至此，我们的补丁就打好了，不过好像还少了点什么。

对，缺了自动化。

我们通过npm scripts 进行自动化还原，每次构建之前，进行打补丁工作，这样我们的修改就能同步给组内其他小伙伴了。

  "scripts": {
        "serve": "npm-run-all postinstall vue-cli-service serve",
        "build": "npm-run-all postinstall vue-cli-service build"
        "postinstall": "patch-package"
    },

以上呢，是简略后的scripts，大致思路就是利用npm-run-all 执行postinstall，安装我们的补丁，然后再进行构建。

使用方法不变，只是增加了打补丁的过程。

 5、注意事项

（1）patch是锁定版本号的，如果升级了版本，patch内容将会失效，最好在package.json能够锁定版本号。

（2）魔改一时爽，但是也失去了升级的能力，提issue和PR才是正途。

（3）patch能够支持多少文件修改，没有具体测试，预感是只能支持少量修改。