使用pnpm的patch命令打补丁,安装依赖后自动打上修改的内容

魔术师ID

已于 2023-03-27 17:59:08 修改

阅读量1.9k

点赞数

分类专栏：前端方法的总结及记录，归纳文章标签： vue.js javascript 前端

于 2023-01-27 21:44:13 首次发布

本文链接：https://blog.csdn.net/qq_45585640/article/details/128772678

版权

前端方法的总结及记录，归纳专栏收录该内容

48 篇文章

订阅专栏

使用pnpm的patch命令打补丁,安装依赖后自动打上修改的内容

在开发时，有时ui碰到依赖的类库有bug，需要修改，一般都有这几种处理方式

fork源码，修复bug然后提交pr，等待作者合并，释放新版本
提issue 等待作者修复（等同于法1）
使用patch-package打补丁，安装依赖后自动打上修改的内容

显然方法1和方法2在紧张的开发阶段不大现实，因此使用方法3更为合理。但如果你项目使用pnpm的话，patch-package并不能使用，所幸在v7.4.0的版本中，pnpm添加了pnpm patch和pnpm pathc-commit，支持了给依赖打补丁。

大致的流程也比较简单：

通过命令拷贝一份依赖库的文件项目，然后用户对该拷贝的项目进行修改，
通过提供的命令对修改后的代码以及原来的代码进行diff，生成一个xxx.patch的文件，对应项目的package.json会有个pnpm.patchedDependencies字段来指向patch文件，之前其他人安装依赖后，会自动使用到该patch

下面做一个简单的demo：

mkdir patch-demo
cd patch-demo
pnpm init

安装ant-design-vue@1.7.8依赖

pnpm i ant-design-vue@1.7.8

接下来，我们对该库进行自己的一些修改

# 注意这里要指定对应的版本
pnpm patch ant-design-vue@1.7.8

You can now edit the following folder: pnpm patch-commit /private/var/folders/3c/v35nykz53t11n6gl0gl2kn6w0000gn/T/e07c1fd284b06829e8872915955e71cd

然后我们打开生成的这个链接/private/var/folders/3c/v35nykz53t11n6gl0gl2kn6w0000gn/T/e07c1fd284b06829e8872915955e71cd，在里面修改ant-design-vue的代码

假设我们要在改方法加上一行打印

module.exports = function isOdd(value) {
+ console.log('patch')
  const n = Math.abs(value);
  if (!isNumber(n)) {
    throw new TypeError('expected a number');
  }
  if (!Number.isInteger(n)) {
    throw new Error('expected an integer');
  }
  if (!Number.isSafeInteger(n)) {
    throw new Error('value exceeds maximum safe integer');
  }
  return (n % 2) === 1;
};

修改完成保存后，执行如下指令：

pnpm patch-commit /private/var/folders/3c/v35nykz53t11n6gl0gl2kn6w0000gn/T/e07c1fd284b06829e8872915955e71cd

然后可以看到项目中生成了一个patches/ant-design-vue.patch的文件，同时在package.json中也增加了如下配置：

  "pnpm": {
    "patchedDependencies": {
      "ant-design-vue@1.7.8": "patches/ant-design-vue@1.7.8.patch",
      "element-ui@2.15.8": "patches/element-ui@2.15.8.patch"
    }
  }

查看node_modeles下的ant-design-vue@1.7.8代码，该修改已经加上了，后续别人拿到该项目，重新pnpm i也能得到修改后的代码

注意
如果使用window并且使用git-bash的话，文件路径要使用两个\\分割, 如：

pnpm patch-commit  C:\\Users\\ADMINI~1\\AppData\\Local\\Temp\\482a1b2c5aaad6b4abb4d39bab8ef39c\\user