使用 patch-package 实现 npm 包内容的魔改

629 阅读2分钟

在开发过程中,我们经常会遇到需要使用 npm 包但该包缺少我们需要的功能,或者使用第三方依赖包时遇到了 bug,需要等待作者修复,等待的时间不可控。这时候,我们可以借助 patch-package 来自己动手去修复问题。本文将介绍 patch-package 的使用方法和常用命令,以及注意事项。

一、使用

1、安装依赖包

首先需要安装 patch-package 和 postinstall-postinstall 两个依赖包,可以通过以下命令进行安装:

yarn add patch-package -D
yarn add postinstall-postinstall -D

其中,在使用 yarn/yarn add 等命令时补丁一定会生效,使用 yarn remove 时却不一定生效,postinstall-postinstall 就是用来解决 yarn remove 时不一定生效的这个问题。

2、package.json 新增命令

在 package.json 中新增一个 postinstall 命令,当包被安装后会运行 postinstall。具体操作如下:

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

3、修改 npm 包文件内容,并运行补丁命令

修改 npm 包文件内容,然后运行以下命令:

yarn patch-package package-name --use-yarn --include ^dist

其中,package-name 表示需要修改的 npm 包的名称;--use-yarn 表示使用 yarn.lock;--include ^dist 包含路径使用正则表达式,表示仅仅包含 dist 文件夹。

执行该命令后,会在项目根目录下生成 patches/packageA+x.x.x.patch 文件,并在文件中记录修改内容。该命令的作用是生成补丁,将修改的内容记录在补丁文件中。

4、验证补丁是否生效

可以移除 npm 包并重新运行 yarn,验证修改的内容是否还在。如果修改的内容还在,说明补丁生效。

5、推送 patches 文件夹到远端仓库

最后,将 patches 文件夹推送到远端仓库。日后无论是谁拉取代码,安装依赖,我们之前修改的部分都会生效的。原理是在安装依赖包的时候会自动执行 postinstall 命令,然后 patch-package 通过项目下的补丁文件对 node_modules 中的文件进行修改,这样每个人安装后得到的依赖文件就能统一都是修改过的文件。

也可以直接执行 postinstall 命令,达到通过补丁文件修改依赖包文件的目的。

二、常用命令

  • --use-yarn:表示使用 yarn.lock
  • --include ^dist:表示包含文件路径,使用正则表达式,仅仅包含 dist 文件夹

注意事项

  • patch 是锁定版本号的,如果升级了版本,patch 内容将会失效,最好在 package.json 能够锁定版本号。
  • 魔改的同时,也局限了升级的能力,尽量还是去提 issue 和 PR。