pnpm 中无法使用 patch-package 打补丁

#javascript

介绍

前端开发过程中，经常会遇到第三方开源库有 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.patch
git 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's
dependencies.

大概意思是支持 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.js
cp node_modules/my-package/common.js patches/my-package
  1. 在项目中新建一个脚本 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));
}
  1. package.json 中新增一个 postinstall 命令指向我们的脚本
"scripts": {
    "postinstall": "node scripts/postinstall.js"
 }

总结

以上就是小编在一个使用 pnpm 包管理器的项目中实现给 npm 包打补丁的方案，如果您有更好的解决思路，欢迎分享出来。

参考

评论