手动修改 node_modules 中的依赖包

在我们通过cli创建的项目在项目根目录下都会有一个 package.json 的文件，而我们通过在项目根目录下执行命令 npm install（或 npm i）安装与 package.json 中相对应的依赖包，而这些依赖包都在根目录的 node_modules 文件中，一般情况情况下我们不会去修改 node_modules 依赖包中的源码，但凡事总有例外，我们总会有各种各样的原因需要改动依赖包中的源码。

在写本编文章之前我使用过以下两种方式去修改 node_modules 中的源码：

1、直接在 node_modules 中修改，但这有一个致命缺点，那就是每次 npm install 都需要再次手动修改一次，不能做到一劳永逸的效果，并且在团队开发中也有诸多不便。

2、将需要修改的组件源码拷贝到项目中单独自己封装一个组件，然后再引用。这样做也有很多不便，比如自己单独封装组件既繁琐又耗时，而且还会造成项目看起来比较臃肿。

以上这两种方式弊端都比较明显，且不易于维护，都是比较low方法，并且也是不建议使用的，下面就记录一下我发现的一种较为高大上的一种方案，该方案操作简单、便捷、且一劳永逸，该方法就是采用 patch-package 修改 node_modules 中的依赖包。

步骤一、通过命令安装 patch-package

npm install patch-package --save-dev

步骤二、修改项目根目录下的 package.json 文件

在 package.json 文件中的 scripts 中加入 "postinstall": "patch-package"

2-1

步骤三、手动修改 node_modules 依赖包中的源码

将你需要修改的 node_modules 依赖包中源码直接修改如下图

3-1

步骤四、手动执行命令创建 npx patch-package package-name 补丁文件

执行命令：npx patch-package package-name

执行该命令后会在项目根目录中自动创建一个 patches 文件夹，该文件夹中就会出现一个 package-name+version.patch 的补丁文件。

其中命令中的 package-name 指的是被修改的依赖包的名字（不是被修改的文件的名字）

举个例子：还是在图3-1 中我修改的是 @tarojs/components 组件依赖包中众多组件中的其中一个组件中的一个文件，在 package.json 文件中包含 node_modules 中所有的依赖包

4-1

因此我所执行的命令就是：npx patch-package @tarojs/components

执行该命令后会在项目根目录中自动创建一个 patches 文件夹，并且该文件夹中出现一个 package-name+version.patch 的补丁文件，如图：

4-2

步骤五、测试补丁文件是否可以生效

手动删除项目中的 node_modules 文件，并重新执行 npm install 命令安装 node_modules 依赖包。安装成功后查看你之前修改的 node_modules 依赖包中的文件，查看你修改的代码是否依然存在，如果之前修改代码依然存在即表明补丁文件已经生效，如果你之前修改的代码不存在即表明补丁文件没有生效，你需要从新阅读本篇文章看到底是那个环节出了问题。