当前位置: 首页 > news >正文

vue修改node_modules打补丁步骤和注意事项_node_modules 打补丁

1、vue-pdf问题解决及patch-package简介:https://www.jianshu.com/p/d1887e02f8d6

2、使用“黑魔法”优雅的修改第三方依赖包:https://zhuanlan.zhihu.com/p/412753695

3、使用patch-package定制node_modules中的依赖包:https://blog.csdn.net/qq_32429257/article/details/111051217

具体应用场景就不多说了,可以自己看文章,其实还是有蛮多需求的,这里主要记录一下具体使用步骤。

patch-package的使用

Step1:安装

使用npm安装

npm i patch-package

推荐使用yarn安装

yarn add patch-package postinstall-postinstall
Step2:修改package.json文件

package.json的scripts中声明了一系列的npm脚本命令,如下:(参考资料:http://caibaojian.com/npm/misc/scripts.html)

  • prepublish: 在包发布之前运行,也会在npm install安装到本地时运行
  • publish,postpublish: 包被发布之后运行
  • preinstall: 包被安装前运行
  • install,postinstall: 包被安装后运行
  • preuninstall,uninstall: 包被卸载前运行
  • postuninstall: 包被卸载后运行
  • preversion: bump包版本前运行
  • postversion: bump包版本后运行
  • pretest,test,posttest: 通过npm test命令运行
  • prestop,stop,poststop: 通过npm stop命令运行
  • prestart,start,poststart: 通过npm start命令运行
  • prerestart,restart,postrestart: 通过npm restart运行

可以看到依赖包在安装完之后会执行postinstall命令

所以我们在package.json的scripts里面增加:"postinstall": "patch-package"

"scripts": {***,
+   "postinstall": "patch-package"
}

修改 package.json,新增命令 “postinstall”: “patch-package”,如图:

Step3.执行命令 npx patch-package 修改的文件夹名字 此处文件夹名字指 node_modules 中下的文件夹名。

比如如:npx patch-package pdfjs-dist 这里的 pdfjs-dist 就是我们修改的文件的主文件夹名。

Step4.生成补丁 命令执行结束后查看根目录下是否生成了 patches 文件夹,patches文件夹是自动生成的,如图:

Step5.npm install 验证 在项目里 npm install 验证,是否有补丁包的提示,有就表示打补丁成功!

最后

推荐一些系统学习的途径和方法。

路线图

每个Web开发人员必备,很权威很齐全的Web开发文档。作为学习辞典使用,可以查询到每个概念、方法、属性的详细解释,注意使用英文关键字搜索。里面的一些 HTML,CSS,HTTP 技术教程也相当不错。

HTML 和 CSS:

html5知识

css基础知识

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 数据库系统概述选择简答概念复习
  • 如何实现ElementUI动态表头?
  • TikTok账号养号的流程分享
  • windows修改hosts文件、windows刷新dns缓存
  • 【硬件开发】振铃
  • PHP框架详解:Symfony框架讲解
  • [C#]使用深度学习算法opencvsharp部署RecRecNet广角图像畸变矫正校正摄像广角镜头畸变图像
  • [保姆级教程]uniapp实现页面路由配置
  • 基于python的三维装箱可视化
  • ArcGIS Pro SDK (四)框架 2
  • Harbor本地仓库搭建002_Harbor负载均衡节点搭建_nginx安装配置_harbor安装---分布式云原生部署架构搭建002
  • pdf怎么压缩到2m以内或5m以内的方法
  • 贪心算法——赶作业(C++)
  • 14、modbus poll 使用教程小记1
  • iOS18新增通话录音和应用锁!附升级教程及内置壁纸
  • 分享一款快速APP功能测试工具
  • (ckeditor+ckfinder用法)Jquery,js获取ckeditor值
  • 【MySQL经典案例分析】 Waiting for table metadata lock
  • Centos6.8 使用rpm安装mysql5.7
  • Docker入门(二) - Dockerfile
  • Java 11 发布计划来了,已确定 3个 新特性!!
  • js面向对象
  • Koa2 之文件上传下载
  • LeetCode29.两数相除 JavaScript
  • Markdown 语法简单说明
  • Swift 中的尾递归和蹦床
  • Terraform入门 - 1. 安装Terraform
  • TiDB 源码阅读系列文章(十)Chunk 和执行框架简介
  • VuePress 静态网站生成
  • windows下如何用phpstorm同步测试服务器
  • 创建一种深思熟虑的文化
  • 使用agvtool更改app version/build
  • 使用Envoy 作Sidecar Proxy的微服务模式-4.Prometheus的指标收集
  • 怎样选择前端框架
  • 交换综合实验一
  • ‌JavaScript 数据类型转换
  • #{}和${}的区别是什么 -- java面试
  • #控制台大学课堂点名问题_课堂随机点名
  • #中国IT界的第一本漂流日记 传递IT正能量# 【分享得“IT漂友”勋章】
  • (顶刊)一个基于分类代理模型的超多目标优化算法
  • (多级缓存)多级缓存
  • (二开)Flink 修改源码拓展 SQL 语法
  • (附源码)springboot宠物管理系统 毕业设计 121654
  • (附源码)ssm基于jsp高校选课系统 毕业设计 291627
  • (牛客腾讯思维编程题)编码编码分组打印下标题目分析
  • (七)glDrawArry绘制
  • (一)u-boot-nand.bin的下载
  • (已解决)Bootstrap精美弹出框模态框modal,实现js向modal传递数据
  • (转载)Google Chrome调试JS
  • .NET Core中如何集成RabbitMQ
  • .NET Micro Framework 4.2 beta 源码探析
  • .NET 设计模式—适配器模式(Adapter Pattern)
  • .NET/C# 如何获取当前进程的 CPU 和内存占用?如何获取全局 CPU 和内存占用?
  • .net操作Excel出错解决
  • @德人合科技——天锐绿盾 | 图纸加密软件有哪些功能呢?