如何给npm包打补丁——记一次解决vue-cropper打包报错

背景

一个vue3项目中需要使用图片裁剪的功能，于是使用vue-cropper，本地开发没有问题，打包的时候报错。

若本地执行命令"build:fat": "vue-tsc && vite build --mode fat"则报错如下图：

笔者项目中，vue的版本为3.2.47，vite的版本为4.3.5，vue-tsc的版本为1.6.4。

尝试解决

设置exclude

遇到这种问题先尝试自己解决，比如设置ts忽略对node_molules的检查，忽略对使用vue-cropper的组件的检查：

"exclude": [
  "node_modules",
  "dist",
  "**/*.js",
  "src/components/ImgHandle/cropper.vue",
  "src/components/ImgHandle/imgCropper.vue"
]

然而未果！

查看issues

于是到vue-cropper的 github上看issues，特别是：vue3 + ts + vite打包报错 和 打包的时候报错 ，其中提到了使用使用类型声明和增加忽略ts检查的代码可以解决问题，如下图：

但笔者没看懂。.d.ts是指我们项目下的.d.ts文件还是vue-cropper的.d.ts文件呢？笔者把配置加到了项目中，没解决问题，于是改vue-cropper的源码，在报错的地方忽略ts检查，本地打包不报错了。但是这解决不了线上打包报错的问题，于是想到了给vue-cropper打补丁。

给vue-cropper打补丁

笔者使用的包管理器是pnpm，打补丁主要涉及到两个命令：pnpm patch 和 pnpm patch-commit 。

pnpm patch 中的pkg指准备要打补丁的包，运行这个命令会让你要打补丁的包被提取到一个临时目录下，打开这个目录可以修改包的源代码。

pnpm patch-commit 中的path是指刚才使用pnpm patch命令所产生的那个临时目录的路径，这个命令可以在当前项目的跟目录下创建一个patches目录，并把补丁文件放到这里面，同时这个命令也会修改package.json文件。

下面介绍使用pnpm给vue-cropper打补丁的具体方法步骤：

（1）删除node_modules文件，因为之后要重新安装被打补丁的依赖，所以就删一下嘛；

（2）锁定要打补丁的依赖的版本 （也就是版本号需要固定一下，不要前面的"^"）, 因为以后人家依赖升级了，咱的补丁可能没有用了啊，所以我们是针对特定版本的依赖打补丁；

（3）运行命令 pnpm patch vue-cropper@1.0.9 命令，并修改依赖的源代码；

（4）运行命令 pnpm patch-commit 并检查项目根目录下是否出现patches文件夹以及检查一下package.json文件是否被修改了。

（5）重新执行pnpm install命令 安装依赖

可见打补丁就5个步骤，是不是非常简单呢？

总结

像遇到npm包打包时ts报错的问题，一般都会最先想到设置ts的配置项；未果的话就去搜索引擎搜索一圈；还未果的话可以到githu上看看issues，找一找有没有类似的问题，能解决我们遇到的问题最好，不解决问题看一看也能受到启发。