前言
后续：该文章只是记录一下patch-package使用，文中业务场景可以忽略
事情是这样的,之前在开发的时候发现页面上有一个错误频繁出现(后来发现该组件在layout组件中引用),这个错误倒是不影响页面功能..... 改改吧.
报错\定位
报错信息
判断是
@chenfengyuan/vue-qrcode 的Object.create()方法报错,看一下Object.create()方法
throw new Error("NO input text") data没传或者data为空则报错,emmm.看一下页面中怎么用的吧
这边的逻辑是:qrCodeUrl初始化为"",在点击一个按钮的时候赋值,所以一定会存在value为""的情况,也就会抛出错误.
解决
抛出错误又不是报错,我去掉if的执行语句就行了.狗头保命
@chenfengyuan/vue-qrcode的dist目录下有很多个不同后缀的js文件,笔者这里为了保险起见.对所有的文件都做了修改(不同后缀差异可以看另外一篇文章或者百度了解)
改动打包后的源代码,只会在自己本地生效,团队是不会生效的,所以要让源代码在团队成员的本地也有修改
这边有几种方案,笔者这里用的patch-package.后面会分析利弊和简单介绍其他方法
1. 安装patch-package包
npm i patch-package --save-dev
2. 修改源码
就前面的的改动
3. 执行命令
npx patch-package @chenfengyuan/vue-qrcode
4. 结果
可以看到根目录下生成了patches文件夹,里面是git的patch文件,记录了修改的信息
5. 添加脚本,固定版本
添加脚本"postinstall": "patch-package"到package.json的script中,然后修改"@chenfengyuan/vue-qrcode": "^1.0.2"成"@chenfengyuan/vue-qrcode": "1.0.2"
这里要注意项目安装的是什么版本,如果是1.0.3那就固定为1.0.3;可以看patchs文件夹下的文件名确定或者查看package-lock文件...
然后提交代码到代码库
postinstall是git hook,当团队成员拉取最新代码,执行npm install的时候会触发patch-package命令
这样的话当团队成员拉代码,执行npm install命令以后就可以把patches文件夹下的改动同步到源代码中了
总结
patch-package是依赖某个特定版本的修改,如果版本变动了,那么针对于原来版本的修改就会不生效,这就是要绑定版本的原因.
还有其他方法可以修改源码以后,团队内生效:
- webpack 的alias 将源码里面引用模块的路径替换成我们自己修改之后的文件 参考文章
- 复制源码到项目中,然后在项目中修改
- fork别人的代码到自己的仓库,改动.然后从自己的仓库中下载
对于第2.3点的话,如果想要用依赖的最新版本是比较麻烦的;如果不需要变动依赖的版本或者只用该依赖的基本功能,其他地方自己魔改,那么推荐使用
对于第1点,如果项目改动的地方是少量的文件那么也推荐使用;而且它对于依赖版本更新以后,它也会同步更新.
最后
本文章为笔者学习总结记录用，后续可能会更新
