在开发过程中，不可避免的会用到第三方的依赖，越庞大臃肿的代码就有可能存在bug，但是代码如果在依赖包 node_modules 路径下这种修改就有点麻烦了……

给作者提issues，摆烂了……

给作者提PR，不合并……

遇到这种的，要么自己fork一份改完了发布，例如我们现在团队就是自己在维护一套饿了么组件，但是这种成本也是挺高的，大团队有这个精力，对于小团队肯定是不划算的。所以，一般的开发者都会这么处理：

1. 可以修改代码对应的文件，但是如果团队中其他人拉下来的代码，npm install一下，还是被覆盖掉，不能做到一劳永逸的效果，并且在团队开发中也有诸多不便。
2. 将需要修改的组件源码拷贝到项目中单独自己封装一个组件，然后再引用。这样做也有很多不便，比如自己单独封装组件既繁琐又耗时，而且后续组件版本升级了，那就摊手了……

那么，我要怎么手动修改 node_modules 中的依赖包呢？

下面就记录一下较为高大上的一种方案，该方案操作简单、便捷、且一劳永逸，该方法就是采用 patch-package 修改 node_modules 中的依赖包。

patch-package

Owner：ds300

Updated：2024-11-21 01:04

Watch：10470

Star：10470

Fork：295

Fix broken node modules instantly 🏃🏽‍♀️💨

1. 安装

# npm
npm install patch-package --save-dev

# yarn
yarn add --dev patch-package postinstall-postinstall

2. 设置

在 package.json 文件中的 scripts 中加入

"postinstall": "patch-package"

3. 修改 node_modules 依赖包中的源码

这里需要注意的是，假如引入的源码是编译过的源码，要么需要把未编译的源码改完，然后编译后替换这样才能解决问题，或者就直接在项目中引入未编译的源码。

怎么看依赖包里默认引入的，以下图为例：

可以看出来，gwm 组件引入的是 dist 下编译后的源码，咱们修改只能修改 lib 下的文件，然后再执行一下编译，如果不想这么麻烦，就引入lib 下的 index.js。

这里我修改这块代码：

创建补丁文件

# package-name 替换为你修改的依赖包名称，例如我这里修改的是gwm
# npx patch-package <package-name>
# yarn patch-package package-name

npx patch-package gwm 

执行该命令后会在项目根目录中自动创建一个 patches 文件夹，该文件夹中就会出现一个 package-name + version.patch 的补丁文件，其中命令中的 package-name 指的是被修改的依赖包的名字。

把补丁文件推送到仓库

这样把补丁文件推送到仓库，无论是日后自己拉取代码还是团队中其他同事拉取代码，无论 npm install 多少次该补丁文件都会生效。

更多使用文档：https://www.npmjs.com/package/patch-package