如何优雅的修改npm第三方依赖包

2022-06-22  本文已影响0人  ikonan

想想我们在使用第三方依赖包时如果遇到了bug，通常解决的方式都是绕过这个问题，使用其他方式解决，较为麻烦。或者给作者提个issue，然后等待作者的修复，等待的时间不可控。那么这时候就可以借助patch-package自己动手去修复该bug，感觉是不是很棒，并且还可以在第三方依赖包上，根据业务需求扩展能力。

当然最好还是扩展一些通用性比较高的能力，如果是比较通用且该能力大多数开发者都有这种诉求的话可以给第三方依赖包提个PR。参与开源项目是不是简单了起来了～（不要在魔改的路上越走越远）

使用步骤

Step1: 安装

// 使用npm安装
npm i patch-package

// 使用yarn安装
yarn add patch-package postinstall-postinstall

为什么要使用yarn安装，需要多安装postinstall-postinstall这个依赖，有兴趣可以看官方解释 Why use postinstall-postinstall

Step2：修改package.json

package.json的scripts中声明了一系列的npm脚本命令，如下：（参考资料：npm-scripts）

可以看到依赖包在安装完之后会执行postinstall命令
所以我们在package.json的scripts里面增加："postinstall": "patch-package"

"scripts": {
    ***,
+   "postinstall": "patch-package"
}

Step3：修改依赖包源码

在项目的node_modules 找到要修改的依赖包， 例如（resize-observer-polyfill）：


image.png

Step4: 生成补丁

yarn patch-package package-name(修改的包名)
或者
npx patch-package package-name（npm版本 > 5.2）

patch-package 6.4.7
• Creating temporary folder
• Installing resize-observer-polyfill@1.5.1 with yarn
• Diffing your files with clean files
✔ Created file patches/resize-observer-polyfill+1.5.1.patch

💡 resize-observer-polyfill is on GitHub! To draft an issue based on your patch run

    yarn patch-package resize-observer-polyfill --create-issue

可以看到patch-package已经为我们创建了一个补丁。

默认会在我们的根目录下创建一个patches文件夹。在patches文件夹下会创建依赖包名+版本号.patch的文件，文件描述了我们修改了什么，第几行，有点像git的提交记录


image.png

Step5: 测试补丁是否有效

手动删除node_modules文件夹，重新执行npm install安装依赖包。可以看到在依赖包安装结束后执行了patch-package命令，之前生成的补丁被应用了

patch-package 6.4.7
Applying patches...
resize-observer-polyfill@1.5.1 ✔
Done in 177.35s.

查看node-modules中之前修改的resize-observer-polyfill 修改的地方，查看之前修改的代码是否还存在。如果之前修改的代码还存在，说明补丁文件已经生效了，如果不存在，排查下是否哪个步骤出现了问题。

最后将patches文件夹推送到远端仓库，日后无论是谁拉取代码，安装依赖，我们之前修改的部分都会生效的

注意事项

上一篇下一篇

猜你喜欢

热点阅读