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

于 2024-05-08 18:04:54 发布
阅读量618 收藏 27
点赞数 21
分类专栏： 程序员 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84619287/article/details/138581296
版权

计算机网络

  • HTTP 缓存

  • 你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？

  • HTTP 常用的请求方式，区别和用途？

  • HTTPS 是什么？具体流程

  • 三次握手和四次挥手

  • 你对 TCP 滑动窗口有了解嘛？

  • WebSocket与Ajax的区别

  • 了解 WebSocket 嘛？

  • HTTP 如何实现长连接？在什么时候会超时？

  • TCP 如何保证有效传输及拥塞控制原理。

  • TCP 协议怎么保证可靠的，UDP 为什么不可靠？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

算法

  • 链表

  • 字符串

  • 数组问题

  • 二叉树

  • 排序算法

  • 二分查找

  • 动态规划

  • BFS

  • 栈

  • DFS

  • 回溯算法

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 验证，是否有补丁包的提示，有就表示打补丁成功！

注意事项1：

1、自动部署中不生效
报错信息
npm WARN lifecycle nuxt-base-pc@1.0.0~postinstall: cannot run in wd nuxt-base-pc@1.0.0 patch-package (wd=/data/servers/jenkins/workspace/nginx)
解决办法
在项目根目录添加.npmrc 文件，写入：
unsafe-perm = true

注意事项2：
  1. patch是锁定版本号的，如果升级了版本，patch内容将会失效，最好在package.json能够锁定版本号。
  2. 魔改的同时，也局限了升级的能力，尽量还是去提issue和PR。

计算机网络

  • HTTP 缓存

  • 你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？

  • HTTP 常用的请求方式，区别和用途？

  • HTTPS 是什么？具体流程

  • 三次握手和四次挥手

  • 你对 TCP 滑动窗口有了解嘛？

  • WebSocket与Ajax的区别

  • 了解 WebSocket 嘛？

  • HTTP 如何实现长连接？在什么时候会超时？

  • TCP 如何保证有效传输及拥塞控制原理。

  • TCP 协议怎么保证可靠的，UDP 为什么不可靠？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

算法

  • 链表

  • 字符串

  • 数组问题

  • 二叉树

  • 排序算法

  • 二分查找

  • 动态规划

  • BFS

  • 栈

  • DFS

  • 回溯算法

2401_84619287
关注
  • 21
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue修改node_modules打补丁步骤和注意事项_node_modules 打补丁
2301_82241698的博客
04-17 891
这里的 pdfjs-dist 就是我们修改的文件的主文件夹名。可以看到依赖包在安装完之后会执行postinstall命令。
vue修改node_modules打补丁步骤和注意事项
最新发布
H_shaohui的博客
09-14 1096
想想我们在使用第三方依赖包时如果遇到了bug，通常解决的方式都是绕过这个问题，使用其他方式解决，较为麻烦。或者给作者提个issue，然后等待作者的修复，等待的时间不可控。那么这时候是不是就可以借助patch-package自己动手去修复该bug，感觉是不是很棒，并且还可以在第三方依赖包上，根据业务需求扩展能力。3、使用patch-package定制node_modules中的依赖包：https://blog.csdn.net/qq_32429257/article/details/111051217。
【node_modules】打补丁-修改node_modules源码
wxlll123的博客
02-03 433
修改node_modules源码
使用patch-package给node_moddules中的包打补丁
weixin_43937729的博客
03-14 179
使用patch-package修改node_moddules的文件，@jiaminghi/data-view包错误解决
node_modules报错,用patch-package给node_modules打补丁步骤,图文并茂超详细
TING_april的博客
07-20 949
node_modules/@volar/vue-language-core中报错,用patch-package给node_modules打补丁,package.json中配置"postinstall": “patch-package”
修改 node_modules后打补丁patch-package
weixin_45449046的博客
03-24 393
直接在 node_modules 的 某 文件（需要修改的文件）修改内容，修改完之后执行 patch 命令，生成 补丁。当你修改完提交后，每次npm i 时，就会把补丁文件内容放到对应 node_modules 的包中。此时会在根目录生成patches文件夹，A文件即为补丁文件。
vue中node_modules中第三方模块的修改使用详解
10-16
主要介绍了vue中node_modules中第三方模块的修改使用,本文图文并茂给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
next-compile-node-modules:Next.js插件可使用Babel编译所有node_modules
05-27
下一个编译节点模块 Next.js插件可使用Babel编译... 该插件更改Next.js的webpack配置，以默认情况下编译所有node_modules 。 尽管这会影响性能，但它只会减慢第一次编译的速度，而借助内置的缓存，后续编译的速度会更
详解如何修改 node_modules 里的文件
11-20
`patch-package`允许你在`node_modules`内修改文件，并自动保存补丁，以便在安装新版本时应用。安装`patch-package`和添加相关配置到`package.json`： ```bash npm i patch-package --save-dev ``` 修改`package....
vue-element-admin 完整包（包含node_modules）
04-14
很多时候在安装这个vue-element-amdin的时候都会出现各种各样的报错，所以在一次成功之后就不想再折腾这个安装包了。
如何给node_module中的包打补丁?
localhost
11-29 1047
修改node_modules源码,不影响重写安装node包---俗称：打补丁
对node_modules 中修改的内容进行补丁修复
guxuehua的博客
10-31 457
node_modules中的源码有bug，项目有着急上线时，可以使用patch-package对node_modules中的内容进行补丁修复，这样团队其他人也不用再修改一次node_modules中的内容了，直接install安装就可以 使用方法：掘金https://juejin.cn/post/6962554654643191815 ...
vue项目修改node_modules里面的源码，提交到git上别的同事下载代码也需要手动改源码的问题
xxitcef的博客
05-29 4265
需求：插件不满足要求，需要修改源码，但是上传代码到git仓库时，我们通常会忽略node_modules文件上传，这样导致另一个同事下载代码时，需要重新npm install，那么下载下来的node_modules文件就是原本的，而不是我们当时修改过的，所以这个时候需要同事也手动修改源码。下面时解决这个问题的方法 具体步骤： 1、在跟目录下新建一个scripts文件夹 2、在新建的scripts建一个代替node_modules的文件夹，取名最好不要叫node_modules(因为上传代码时同样会被忽略)，我
修改node_modules源码，并保存，使用patch-package打补丁
前端蜗牛君
06-21 1623
首先，我们能想到的思路是直接修改第三方库的代码，不过这会带来团队协作的问题，你的改动需要同步到团队所有成员，比较麻烦。好在，我们可以使用 patch-package 这个库来解决这类问题。一方面，它能记录第三方库代码的改动，另一方面也能将改动同步到团队每个成员。我们以vue常用的 iview 组件库做实验，先安装一下： 我们随便修改一行，打开某个文件 在slot后面加了个test，然后我们希望这行修改的代码，在npm install重新安装组件库的时候仍存在。如何实现呢？ 2、修改脚本 package.js
Vue中 引入使用 patch-package 为依赖打补丁 （以修改 vue-pdf 打包后 [hash].worker.js 路径问题为例）
明天也要努力的博客
04-30 3016
patch-package npm地址patch-package github文档如果不需要在生产中运行 npm (如：正在制作 web 前端，则可使用 --save dev）
【Vue】patch-package 基本使用，给修改的 node_modules 下源码“打补丁”
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
05-31 406
需求场景 修改 node_modules 本地跑代码在多人开发项目时，重新 npm install 之后代码会把本地的代码覆盖，这里需要增加一个打包补丁解决。 使用方法 1.安装 npm install patch-package --save-dev 2.新增脚本命令 修改 package.json，新增命令 "postinstall": "patch-package"，如图： 3.执行命令...
vue 修改node_mdoule的源码之后如何打补丁（修改ztree的样式为例）
朝花夕拾的博客
12-23 812
1、首先执行命令 npx -v 看下是否安装了 patch-package 执行命令： npm install patch-package --save-dev 2、安装完后在package.json中添加这一行 "postinstall": "patch-package" 3、修改ztree源码 4、执行命令创建补丁文件 5、创建完成 6、打开文件查看修改后的源码 7、提交代码到远程仓库 ...
如何给vue.js build生产版本的补丁？
chelflan's blog
10-17 783
原因： vue.js build后生成的css、js文件都是hash命名的和压缩的，要是没有设置就生成密密麻麻的代码，哎，密集恐惧症. 发补丁的时候，不方便局部替换。下 解决 1.build的生成规则改下，去掉chunkhash，这样生成的理论上每次都一样，利于替换补丁 修改前： output: { path: config.build.assetsRoot, fil...
vue修改node_modules文件
06-28
### 回答1： 不建议直接修改node_modules文件，因为这会影响到整个项目的稳定性和可维护性。如果需要修改某个依赖包的代码，可以通过以下方式进行： 1. 在项目的package.json文件中，找到需要修改的依赖包，将其版本号改为本地修改后的版本号，然后执行npm install命令，重新安装依赖包。 2. 将需要修改的依赖包下载到本地，进行修改后，再将其发布到npm仓库，然后在项目中使用新版本的依赖包。 3. 如果需要修改的依赖包是自己开发的，可以将其作为本地模块引入到项目中，然后进行修改。 ### 回答2： Vue作为前端框架的一种，依赖于Node.js实现项目构建、打包、运行等功能。因此，Vue的管理及配置文件都存在于node_modules文件夹下。但是，由于Vue项目的个性化开发需求，需要修改其中的某些文件。那么，如何修改node_modules文件夹下的文件呢？方法如下： 1. 首先，需要找到要修改的文件所在的路径。例如，要修改的文件是bootstrap-vue的nav.vue文件，则该文件存放路径为“node_modules/bootstrap-vue/src/components/nav/nav.vue”。 2. 在修改之前，需要备份该文件。将原文件复制一份，命名为nav-backup.vue，作为备份文件存放在src文件夹中。 3. 然后，进入node_modules/bootstrap-vue文件夹，在该文件夹下打开命令行窗口。 4. 在命令行窗口中输入“npm install cnpm -g”，等待安装完成。 5. 然后，输入“cnpm install”命令，等待依赖安装完成。 6. 安装完成之后，进行修改，并保存修改。例如，在nav.vue文件中，将template中的一个div修改为p，则保存修改后的nav.vue文件。 7. 将备份文件nav-backup.vue文件复制到src/components/nav/下，以避免node_modules的内容被Vue官方升级覆盖。 8. 最后，运行“npm run build”进行打包，查看是否存在修改。如果修改成功，则在打包后的项目中体现出来。 总之，修改node_modules文件需要一定的技术实力和经验，需要谨慎操作。同时，也要注意备份原文件，以便避免操作失误而导致的后果。 ### 回答3： Vue是现在非常流行的前端框架，而node_modules则是Vue中一个重要的文件夹，它包含了大量的依赖模块以及插件，并且是Vue的核心文件夹之一。在Vue项目中，如果我们需要对这个文件夹进行修改，则需要进行一定的操作。 首先，我们需要了解node_modules是一个由npm管理的文件夹，里面包含了我们项目中所使用的各种依赖。如果我们需要修改这些依赖的话，那么我们需要更新package.json文件中的对应依赖版本号，然后再使用npm install命令重新安装这些依赖。这样就可以更新node_modules文件夹中的内容。 但是，有时候我们需要对某个依赖进行一些特殊的修改，而这种修改并不一定能够通过版本号的更新来实现。在这种情况下，我们可以手动对node_modules文件夹进行修改。 首先，我们需要先确定需要修改的依赖所在的文件夹路径。然后，在终端中输入cd命令进入该文件夹路径，即可进入该依赖的文件夹。在该文件夹中，我们可以对其中的文件进行修改，比如添加或删除某个功能等。 需要注意的是，在手动修改node_modules文件夹时，应该非常谨慎。首先，我们需要备份原始文件，以防止在修改过程中误删或误修改导致项目无法正常运行。其次，我们还需要注意，手动修改依赖可能会改变依赖的行为，进而导致项目运行出现错误或者安全性问题等。所以，在修改node_modules文件夹前，一定要考虑清楚，尽量使用npm来更新依赖。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值