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