使用patch-package给node_modules的依赖包打补丁

前言

我们在项目根目录下执行命令npm install安装package.json中的依赖包,而这些依赖包都在根目录的node_modules文件中,一般情况情况下我们不会去修改 node_modules 依赖包中的源码,但凡事总有例外需要改动依赖包中的源码。

有两种方式可以修改node_modules包的代码:

  1. 直接修改node_modules保证对应包的源码。但是这样下次执行npm install不会保留更改。只能再次修改对应的源码。这样开发成本比较大。

  2. 将需要修改的组件源码拷贝到项目中单独自己封装一个组件,然后再引用。这样做也有很多不便,比如自己单独封装组件既繁琐又耗时,而且还会造成项目难以维护这些第三方包。

以上两种方式都不适应团队合作开发,团队开发就是为了降低额外的维护成本。所以可以用patch-package来解决这些问题。该方案操作简单、便捷、且一劳永逸,该方法就是采用 patch-package 修改 node_modules 中的依赖包。

安装 patch-package

patch-package包可以通过npm进行安装。

// npm
npm i patch-package --save-dev

//yarn
yarn add --dev patch-package postinstall-postinstall
// npm
npm i patch-package --save-dev

//yarn
yarn add --dev patch-package postinstall-postinstall

打补丁

修改依赖包内容后,就可以运行patch-package创建patch文件了

npx patch-package package-name   # 使用npm

yarn patch-package package-name  # 使用yarn
npx patch-package package-name   # 使用npm

yarn patch-package package-name  # 使用yarn

运行后会在项目根目录下的patches目录中创建一个名为package-name+version.patch的文件。将该patch文件提交至版本控制中,即可在之后应用该补丁了

配置自动打补丁

需要修改package.json的内容,在scripts中加入"postinstall": “patch-package”。

image.png

无论是日后自己拉取代码还是团队中其他同事拉取代码,无论 npm install 多少次该补丁文件都会生效。

好了完结了~