背景

我们常常会遇到一个问题，网上现有的开源插件并不能满足我们实际项目的预期。但如果只需要对源码进行小小的改动就能满足我们的需求，那改源码一定是首选

前言

修改别人的源码往往有这几个方式：

  1. 直接在项目的node_modules下找到插件的源码直接修改；
    • 优点：简单直接、快速见效
    • 缺点：不能持久化，一旦重新安装就失效；不方便团队成员使用修改后的代码
  2. 去github上fork代码到自己的仓库进行修改，并将自己修改过后的代码发布到npm上使用；
    • 优点：团队成员都可以使用到这份修改的代码
    • 缺点：麻烦、十分麻烦

显而易见，上面这两种方法既不优雅，也不可靠。作为程序员的我们岂能被这事儿给难住，开源社区早已给我们准备好了解决方案：patch-package

步骤

假设已经有了一个项目（比如angular），同时安装了一个叫gwm的包（安装命令npm i gwm），现在我想对node_modules中的gwm进行修改。

npm方式（经过检验）

  1. 安装patch-package，命令npm i patch-package --save-dev
  2. 自行修改node_modules文件

  3. package.json中添加命令！！！

    1. "scripts": {
    2. "postinstall": "patch-package"
    3. }

  4. 运行npx patch-package package-name，比如本文中可以运行npx patch-package gwm，此时在项目中应该会生成一个patches的文件夹，如下图

Snipaste_2022-04-22_14-17-02.png

yarn方式（未经过检验）

  1. 安装patch-package和postinstall-postinstall，命令yarn add patch-package、postinstall-postinstall -D（比npm要多安装一个包）
  2. 自行修改node_modules文件

  3. package.json中添加命令！！！

    1. "scripts": {
    2. "postinstall": "patch-package"
    3. }

  4. 运行yarn patch-package package-name，比如本文中可以运行yarn patch-package gwm，此时在项目中应该会生成一个patches的文件夹，如下图

Snipaste_2022-04-22_14-17-02.png

参考文献

  1. 如何做到修改了 node_module 中的包，却不受重新安装的影响
  2. 使用patch-package修改Node.js依赖包内容_ghosind的博客-CSDN博客_patch-package