优雅的修改node_modules中依赖包
王叨叨发表于 2022-06-25 10:42:00
在开发过程中，不可避免的会用到第三方的依赖，越庞大臃肿的代码就有可能存在bug，但是代码如果在依赖包 node_modules 路径下这种修改就有点麻烦了……
给作者提issues，摆烂了……
给作者提PR，不合并……
遇到这种的，要么自己fork一份改完了发布，例如我们现在团队就是自己在维护一套饿了么组件，但是这种成本也是挺高的，大团队有这个精力，对于小团队肯定是不划算的。所以，一般的开发者都会这么处理：
- 可以修改代码对应的文件，但是如果团队中其他人拉下来的代码，
npm install一下，还是被覆盖掉，不能做到一劳永逸的效果，并且在团队开发中也有诸多不便。 - 将需要修改的组件源码拷贝到项目中单独自己封装一个组件，然后再引用。这样做也有很多不便，比如自己单独封装组件既繁琐又耗时，而且后续组件版本升级了，那就摊手了……
那么，我要怎么手动修改 node_modules 中的依赖包呢？
下面就记录一下较为高大上的一种方案，该方案操作简单、便捷、且一劳永逸，该方法就是采用 patch-package 修改 node_modules 中的依赖包。
[github:ds300/patch-package]
1. 安装
# npm
npm install patch-package --save-dev
# yarn
yarn add --dev patch-package postinstall-postinstall2. 设置
在 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 多少次该补丁文件都会生效。