pnpm给插件(naiveUI)打补丁

pnpm打补丁

打补丁这个操作是前端同学所必须要掌握的一个技能。核心是通过打补丁的方式,修改一个第三方库的代码。

为什么需要打补丁

我们在项目开发中,会使用一些第三方库(elementUI、antd等),然后这些库也是可能存在一些bug,亦或者不满足项目使用,这个时候我们想要修改来满足我们的开发需求,那咋么办嘞?

一般有几种办法:

  1. 换库

如果依赖度不高,破坏性不强的话,只需换个满足需求的库即可,无伤大雅。

  1. 给插件提issue

官方更新时间长,作者可能并不会立刻帮忙解决,而我们开发时工期一般都紧急,所以是没办法等的,或者官方可能会拒绝你,直接over。

  1. 自己帮作者改

提pr:问题同上,要和官方反复拉扯,等待他们是一个漫长的过程,pass!

  1. 打补丁

这种是最快最有效的方法,直接在自己项目中修改。

怎么打补丁

因为我的包管理器是pnpm,而pnpm内置了patch功能,如果是npm或者是yarn,需要安装patch-package这个包,下面我们直接开讲(以naiveUI为例)

背景

naiveUI中的date-picker点击月份后没办法自动关闭,需要额外blur才可以,很鸡肋,我们准备修改这个逻辑,当点击月份后,自动关闭月份panel

  1. pnpm patch 包名

我们先执行pnpm patch naive-ui,控制台会生成两行代码如下

  1. 打开临时包编辑

我们来打开第一个You can now edit the following folder: /private/var/folders/dg/16s3shhs24d5673xc5hwzbbm0000gn/T/5d11bc933668d12b661ad1f1817bf6c9,直接打开这个目录,可以看到会帮我们生成naive-ui包的临时文件,直接在这个包里修改代码。

lib和es的区别,一般都是采用异步导入,修改es包中的文件即可

  1. 命令行的第二次话pnpm patch-commit /private/var/folders/dg/16s3shhs24d5673xc5hwzbbm0000gn/T/5d11bc933668d12b661ad1f1817bf6c9,执行commit,这个时候会自动生成patch/naive-ui@2.40.1.patch文件,packag.jsonpnpm-lock.yaml中也会新增
  1. 到此,补丁完成。后续我们如果删除 node_modules,重新 pnpm install,安装完成后 pnpm 会自动读取 patch 文件夹下的内容,将代码修改为 patch 内容。
相关推荐
光影少年15 小时前
大屏页面,一次多个请求,请求加密导致 点击 全局时间选择器 时出现卡顿咋解决(面板收起会延迟1~2秒)
前端·javascript·vue.js·学习·前端框架·echarts·reactjs
Mr.mjw15 小时前
vue中封装一个环形进度条组件,根据外部盒子大小自适应变化
前端·javascript·vue.js
无心使然15 小时前
Openlayers调用ArcGis影像服务之一动态地图、地图切片(/exportImage)
前端·javascript·数据可视化
非优秀程序员15 小时前
智能体的构成--深入探讨Anthropic、OpenAI、Perplexity和LangChain究竟在构建什么。
人工智能·架构·开源
唯火锅不可辜负15 小时前
uniapp开发公众号订阅功能踩坑小记
前端·vue.js
码点滴15 小时前
从“失忆症“到“数智分身“:Hermes Agent 如何重塑你的 AI 交互体验?
人工智能·架构·prompt·ai编程·hermes
opteOG16 小时前
游览器跨域问题详解
前端
狗哥哥16 小时前
面包屑自动推导的算法设计:从“最短路径匹配”到工程可落地
算法·架构
SameX16 小时前
后台 GPS 记录从半天掉电 30% 到全天 8%,我的三版方案演进
前端
Cder16 小时前
用 React + Ink 在终端里「优雅搜索」:开源 CLI 设计与非交互模式实践
前端·agent