使用patch-package给npm包打补丁

一、背景

团队在使用ant-desigin-vue的image组件时，目前的预览支持左旋转/右旋转、放大/缩小、关闭，期望能够在现有功能下同时支持下载按钮。

重新编写组件会花费大量的时间，同时需要对组件的功能完整测试，基于下载功能较为简单，考虑是否能够直接改变ant-design-vue组件库以实现下载功能.

二、给npm包打补丁

1. 安装 patch-package

yarn add patch-package --save-dev

2. 更改npm包中的内容

1. 在node_modules中找到ant-design-vue包，修改其中image组件的内容，添加下载图标以及实现下载功能
2. 测试修改之后image预览组件中是否出现下载按钮以及功能是否正常

3. 生成补丁

1. 执行如下命令

npx patch-package ant-design-vue

2. 项目生成patches目录，文件内容ant-design-vue+3.2.15.patch

1. 生成的.patch文件基于项目当前的版本，如果后续包的版本升级，重复该步骤生成新的补丁包
2. 推荐在安装依赖时使用.lock文件，将包版本固定

5.完善npm脚本

1. 在package.json``script中添加`以下命令

{ 
    "postinstall": "patch-package" 
}

2. 将生成的patches目录push到代码仓库
3. 其他开发人员pull代码之后，执行脚本yarn postinstall即可正常使用下载功能