首页 > 其他分享 >手把手教你使用patch-package给npm包打补丁

手把手教你使用patch-package给npm包打补丁

时间:2023-01-03 13:13:21浏览次数:73  
标签:npm git package 补丁 patch 打补丁 antd

具体文档https://github.com/ds300/patch-package

一、背景

故事从日常团队协作开发展开,整个team使用react + antd4搭建前端页面,在开发中我发现antd4.9.*版本的Input.TextArea组件存在一个bug,该bug表现为maxLength属性限制不符合预期,当输入中文字符时,该属性会将与中文对应的预输入拼音字数一同限制,导致汉字输入长度受阻。查阅了github仓库issue及相关changelog发现官方在v4.15.*版本修复了该bug。

遇到这种问题和大多数人一样,我首先想到的就是升级antd到最新版本,于是二话不说一顿操作,升级完后果然问题迎刃而解~

然而问题真的解决了么?事情往往不是预期的那么顺利,本以为一波愉快升级已经完美的解决了问题,不料好景不长一周后小A同学发来问候:“我发现antd v4.15.3版本存在一个bug,upload组件在windows上无法触发beforeUpload钩子,新功能着急走查于是我将antd定了4.9.4版本”。如此噩耗袭来内心自然是千般不适,进退两难之间脑海中浮现出了之前早有耳闻但一直疏于尝试的打补丁大法,二话不说开始操作。

二、给npm包打补丁

1.安装 patch-package

npm i patch-package --save-dev
 

2.修改npm包

为了避免 v4.15.3 版本之前的其他组件存在未知bug,本次补丁我们基于 4.15.3 版本给 upload 组件打补丁。

打开目标项目代码 node_modules 文件夹,确认是4.15.3版本

 

打开一个不用的工程,安装 v4.9.4 版本并同样打开antd目录

使用复制大法将我们要修改的upload组件代码从 4.9.4 copy到 4.15.3 ,然后 npm run dev启动项目,测试upload组件的bug是否被修复。

3.生成补丁

经验证效果符合预期,此时cd到根木录下,执行如下命令生成补丁文件:

npx patch-package antd
 

此时在根目录下会得到如下文件

很好奇.patch文件是个什么东东,打开文件一目了然,其实就是一些git diff记录描述,补丁原理呼之欲出 —— patch-package会将当前node_modules下的源码与原始源码进行git diff,并在项目根目录下生成一个patch补丁文件。

4.加入版本管理

至此补丁文件已经生成完毕,我们需要将它提交到git中,直接执行常规git操作即可:

  1.   git add patches/antd+4.15.3.patch
  2.    
  3.   git commit -m "feat:添加antd补丁"
  4.    
  5.   git push

5.完善npm脚本

当其他同事拉到代码如何应用补丁呢?基于上述操作我们在npm install后执行patch-package命令即可,这个流程可借助npm script实现,在package.jsonscript中添加如下字段及内容:

  1.   {
  2.   "postinstall":"patch-package"
  3.   }

执行一次完成的「依赖安装 -> 构建发布」,一切符合预期,大功告成~

 

 

标签:npm,git,package,补丁,patch,打补丁,antd
From: https://www.cnblogs.com/sexintercourse/p/17021770.html

相关文章

  • patch-package给依赖打补丁实例详解
    1、安装patch-packagepatch-package 官方只支持npm和yarn。注意:不要使用cnpmyarnaddpatch-package-D2、创建补丁先修改依赖文件,然后运行patch-package来创......
  • 如何为npm包打补丁
    如何为npm包打补丁 我们在开发中经常遇到,npm包有点小问题或者不符合我们的场景。通常的解决方案,是提交一个issue或者PR,等待作者修改,又或者copy源码到本地,修改依赖指......
  • Github Package npm 应用发布实践
    GithubPackagenpm应用发布实践文章目录​​GithubPackagenpm应用发布实践​​​​1.简介​​​​2.创建新库​​​​3.编写index.js​​​​4.npminit初始化​......
  • npm---缓存
    一、缓存位置window下的缓存位置(npm全局位置):user\xxx\AppData\Roaming\npm-cache当中的_cacache文件夹二、清理缓存//强制删除缓存npmcacheclean-f//无论在项目中......
  • Day 04 npm与包
    包一、什么是包第三方模块又称为包基于内置模块封装出来的,提供了更高级、更方便的API搜索包:https://www.npmjs.com/下载包:官方提供了NodePackageManager(简称:NPM包......
  • npm切换淘宝镜像源
    在我们使用npm时,有时经常会卡住,有时又很慢,这时候我们可以更换为淘宝镜像源安装依赖包:配置npm使用淘宝镜像源npmconfiggetregistry配置后可通过下面方式来验证是否......
  • 安装 PHP No package 'libxml-2.0' found
    centos7编译安装php7遇到的问题:./configure配置遇到的Nopackage‘libxml-2.0‘found缺失libxml2.0库,解决方法:yum-yinstalllibxml2yum-yinstalllibxml2-devel......
  • Java SE:static package this关键字与访问权限
    JAVA课程-类和对象static修饰符1.static修饰变量在类中,被static修饰的变量叫做类变量,否则叫做实例变量。类变量:例如staticinta,为整个类中所有对象所共享,只能存在一......
  • NPM
    1.npmrun等同于npmrun-script会直接执行当前路径下的package.json文件中的script字段npmrun会执行package.json中的所有script字段执行npmrun时,会新生成一个shell,......
  • Node.js与npm
    Node.js与内置模块什么是Node.jsNode.js®isaJavaScriptruntimebuiltonChrome'sV8JavaScriptengine.Node.js是一个基于ChromeV8引擎的JavaScript运行......