如何为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能够支持多少文件修改,没有具体测试,预感是只能支持少量修改。

原文地址:https://www.cnblogs.com/jydeng/p/14120348.html