如何给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的组件的检查:

json 复制代码
"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 patchpnpm 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,找一找有没有类似的问题,能解决我们遇到的问题最好,不解决问题看一看也能受到启发。

相关推荐
xkxnq几秒前
第八阶段:工程化、质量管控与高级拓展(130天),Vue端到端测试:Cypress自动化测试(登录流程+表单提交+页面跳转)
前端·vue.js·flutter
小雨下雨的雨3 分钟前
基于鸿蒙PC Electron框架技术完成的五子棋游戏 - 技术实现详解
前端·javascript·游戏·华为·electron·鸿蒙
cheems95274 分钟前
[开发日记]Spring Boot + MyBatis-Plus 抽奖系统开发复盘:从奖品创建、活动校验到前端圈选人员失效的一次完整排障
前端·spring boot·mybatis
老毛肚4 分钟前
jeecgboot vue API 拆分02
前端·javascript·vue.js
赵谨言11 分钟前
基于C#的在线编码与自动化测试全栈Web平台的设计与实现
开发语言·前端·c#
Raink老师15 分钟前
【AI面试临阵磨枪-98】前端如何展示多模态流式输出:文字打字机 + 图片渐进 + 音频播放?
前端·人工智能·面试
AI_零食18 分钟前
奶茶大数据运维表 - 鸿蒙PC Electron框架技术实现详解
运维·前端·华为·electron·开源·harmonyos·鸿蒙
小雨下雨的雨20 分钟前
鸿蒙PC Electron框架实现流体气泡模拟器
前端·人工智能·算法·华为·electron·鸿蒙
ZC跨境爬虫21 分钟前
跟着 MDN 学JavaScript day_4:如何存储你需要的信息——变量
开发语言·前端·javascript·ui·ecmascript
星栈独行23 分钟前
10 分钟跑起第一个 Makepad 应用:先把窗口开起来
前端·程序人生·ui·rust·开源·github