优雅的修改node_modules中依赖包

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

给作者提issues,摆烂了……

2022-06-25T01:57:11.png

给作者提PR,不合并……

2022-06-25T01:56:31.png

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

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

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

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

patch-package
patch-package
Owner:ds300
Updated:2022-12-02 16:55
Watch:7907
Star:7907
Fork:228
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 依赖包中的源码

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

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

2022-06-25T02:28:06.png

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

这里我修改这块代码:

2022-06-25T02:32:12.png

创建补丁文件

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

npx patch-package gwm 

2022-06-25T02:37:02.png

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

把补丁文件推送到仓库

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

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

添加新评论