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 内容。
相关推荐
酉鬼女又兒3 分钟前
零基础快速入门前端Web存储(sessionStorage & localStorage)知识点详解与蓝桥杯考点应用(可用于备赛蓝桥杯Web应用开发)
开发语言·前端·javascript·职场和发展·蓝桥杯·html
DanCheOo8 分钟前
# 从"会用 AI"到"架构 AI":高级前端的认知升级
前端·ai编程
社恐的下水道蟑螂11 分钟前
前端面试必问 Git 通关指南:常用命令速查 + merge/rebase 深度辨析,看完再也不慌
前端·git·面试
None32120 分钟前
NestJS 流式文件上传实践:从 Multer 到 Busboy 的进阶之路
前端·后端
海浪浪21 分钟前
Symbol 产生的背景以及应用场景
前端·javascript
DROm RAPS30 分钟前
十七:Spring Boot依赖 (2)-- spring-boot-starter-web 依赖详解
前端·spring boot·后端
OpenTiny社区31 分钟前
GenUI SDK v1.1.0 正式发布|全端体验革新,能力与稳定性进阶
前端·ai编程
IAUTOMOBILE33 分钟前
Code Marathon 项目源码解析与技术实践
java·前端·算法
Flying pigs~~33 分钟前
基于Deepseek大模型API完成文本分类预测功能
java·前端·人工智能·python·langchain·deepseek
名字很费劲43 分钟前
vue项目,刷新后出现404错误,怎么解决
前端·javascript·vue·404