原文：https://lwebapp.com/zh/post/p...

介绍

前端开发过程中，常常会遇到第三方开源库有 BUG 的状况，通常咱们有以下解决形式

  1. 本人 fork 一份源码批改，修复完后就能够本地打包间接用了。如果你想分享你的研究成果给其他人，能够再传到 npm 仓库或者提交 PR 给源仓库。这种形式有个毛病，就是笔记难放弃和官网库的同步。
  2. 期待库作者修复。这种形式不太靠谱，因为开源作者个别都会比较忙，你的需要可能不会排在后面。

有些小伙伴不晓得，还有一种计划是给本地 npm 包打补丁。意思是你的我的项目在失常装置某个 npm 依赖的状况下，通过在我的项目里减少一个补丁文件，就能够将对这个 npm 包的批改长久保留到我的项目中。这样就能实现针对开源库的 bug 修复间接利用到我的项目中。

小编理解到有一个叫 patch-package 的开源库，能够轻松的做到给 node_modules 的库打补丁。接下来咱们看看如何应用 patch-package ，以及应用过程中有什么问题。

如何应用 patch-package

参照官网的教程，简略几步即可疾速给本地 npm 包打补丁。

  1. 从 node_modules 中找到 npm 依赖包的源码，修复依赖包中的谬误
vim node_modules/my-package/common.js
  1. 运行 patch-package 创立一个 .patch 文件，.patch 文件能够主动被 npm 辨认并利用
npx patch-package my-package
  1. 提交补丁文件就能够与您的团队共享修复了
git add patches/my-package+3.14.15.patchgit commit -m "fix common.js in my-package"
  1. 装置下依赖包
npm i -D patch-package
  1. 在 package.json 中增加一个脚本 postinstall，反对在 npm i 之后就会主动执行 patch-package 将补丁利用上
 "scripts": {    "postinstall": "patch-package" }

因为小编用的 pnpm 包管理器，在执行 npx patch-package my-package时候报错了

**ERROR** No package-lock.json, npm-shrinkwrap.json, or yarn.lock file.You must use either npm@>=5, yarn, or npm-shrinkwrap to manage this project'sdependencies.

大略意思是反对npm、yarn包管理器，不反对pnpm。

官网也的确有 bug ，截止发稿日 2022 年 6 月 18 日，这个问题还是没有被修复的。

有人曾经给 patch-package 提过 bug 了，见issue :How to execute patch to dependencies in other dependencies, when using pnpm #338

不过小编能力无限，只能另辟蹊径，采取变通计划

pnpm 打补丁

pnpm包管理器下给npm依赖包打补丁的思路是，将要修复的源码文件复制进去，放到我的项目里，在每次执行 npm i 装置依赖之后，用nodejs脚本将批改后的文件复制到源码目录中笼罩掉源代码，实现批改代码的目标。

  1. 批改好node_modules中依赖包源码文件，复制到跟目录的patches目录下

    vim node_modules/my-package/common.jscp node_modules/my-package/common.js patches/my-package

  2. 在我的项目中新建一个脚本postinstall.js，实现笼罩源代码文件的操作

    copyFileSync('./patches/my-package/common.js', './node_modules/my-package/common.js');function copyFileSync(source, target) { var targetFile = target; // If target is a directory, a new file with the same name will be created if (fs.existsSync(target)) {     if (fs.lstatSync(target).isDirectory()) {         targetFile = path.join(target, path.basename(source));     } } fs.writeFileSync(targetFile, fs.readFileSync(source));}

  3. package.json 中新增一个postinstall命令指向咱们的脚本

     "scripts": { "postinstall": "node scripts/postinstall.js" }

总结

以上就是小编在一个应用pnpm包管理器的我的项目中实现给npm包打补丁的计划，如果您有更好的解决思路，欢送分享进去。

参考

  • pnpm 中无奈应用 patch-package 打补丁
  • patch-package
  • pnpm
  • 手把手教你应用 patch-package 给 npm 包打补丁