【记录】vue项目修改依赖包源码不被覆盖的方法

已于 2022-08-26 10:18:33 修改
阅读量2.4k 收藏 11
点赞数 2
文章标签： vue.js 前端 javascript npm vue
于 2022-07-18 10:57:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ouch_XTF/article/details/125842501
版权

问题描述

项目中的依赖存在兼容问题,需要修改源码

防止重新 npm i 后修改的源码被覆盖

解决方案：

步骤一: 安装 patch-package

执行命令 npm install patch-package --save-dev

步骤一: 修改package.json配置文件

在这里插入图片描述

步骤三: 编辑你要修改的依赖包源码

在 node_modules 中找到你要修改的源码文件,进行修改下图是我要修改的源码(下图为例子.自行寻找自己要改的源码)
在这里插入图片描述

步骤四:执行记录命令

执行命令 npx patch-package package-xxxx

xxxx为你修改的依赖包名字 (注意是依赖包名字,不是文件名字)
例如我修改的是 vant下的picker文件下的pickerColoum.js文件,xxxx 应为 vant
具体名字可以 通过package.json文件的下的依赖目录找到
在这里插入图片描述
命令执行后,项目下会出现一个 patches 文件夹, 里面有修改源码的记录
在这里插入图片描述

至此已经修改的源码已经被记录,删除node_modules文件夹或者重新 npm i 我们的修改的源码都不会被覆盖

白云苍狗い
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue3 Project 项目(01) 源码
04-02
Vue3 Project 项目(01) 源码
vue在线编辑插件源码
08-10
vue在线编辑插件源码
vue如何对node_modules源码进行修改，对第三方依赖包源码修改
m0_61663332的博客
08-07 3003
vue如何对node_modules源码进行修改，对第三方依赖包源码修改
vue项目修改node_modules里面的源码，提交到git上别的同事下载代码也需要手动改源码的问题
xxitcef的博客
05-29 4140
需求：插件不满足要求，需要修改源码，但是上传代码到git仓库时，我们通常会忽略node_modules文件上传，这样导致另一个同事下载代码时，需要重新npm install，那么下载下来的node_modules文件就是原本的，而不是我们当时修改过的，所以这个时候需要同事也手动修改源码。下面时解决这个问题的方法 具体步骤： 1、在跟目录下新建一个scripts文件夹 2、在新建的scripts建一个代替node_modules的文件夹，取名最好不要叫node_modules(因为上传代码时同样会被忽略)，我
Vue修改node_modules中的第三方插件代码（后续npm install依旧保留该修改）
最新发布
山有木兮木有枝 心悦君兮君不知
01-31 1638
有时在开发过程中，如果node_modules 中我们使用的第三方插件有bug （作者又没有提供相应的API供我们扩展修改，提了issue也没人管）或者本身不满足我们的地方， 我们需要更改node_modules 依赖包中的源码时，为了不更改后，别人或者自己重新install 时， 导致我们的更改丢失，我们需要用到patch-package。（魔改的同时，也局限了升级的能力，尽量还是去提issue）
electron + vue 项目运行打包配置文档
01-08
vue-cli 初始化vue项目构建 vue init webpack project-name electron 配置源码： 1. git clone https://github.com/electron/electron-quick-start** 2. 找到clone下来的项目入口文件main.js 和 package.json 修改路径配置** main.js : 3. 在已建好vue-cli项目中，安装electron依赖：** npm install electron --save-dev npm install electron-packager --save-de
vue修改插件源码
缘晴空的博客
10-29 1798
vue修改插件源码 DEMO下载 1.在根目录创建自定义文件夹script 2. 在script文件夹内创建new_node_modules 3. 在script文件夹创建change-modules.js 4. 找到需要被替换的插件，并在new_node_modules创建相同目录结构，如图： 5.在package.json，“scripts"中创建"change_modules”: “node ./scripts/change-modules.js”，如图： 6.执行change_modules，即
如何修改node_modules源码
HouYing
12-31 2085
我们在开发时，经常遇到需要修改node_modules源码的场景，我们希望修改后的源码下次安装时还可以使用，并让团队的其他成员也能看到。我们可以使用打补丁的方式轻松实现这个目的。在slot后面加了个test，然后我们希望这行修改的代码，在npm install重新安装组件库的时候仍存在。如何实现呢？
vue 修改nodemodules中的依赖包源代码不生效
qq_51389137的博客
05-26 4070
2.重启不行的话现在普遍vue使用的是vite他会把这些依赖的代码缓存在nodemodules的.vite.js下，所以重启项目也没有更新依赖的执行文件。命令行选项启动开发服务器，或者手动删除。强制 Vite 重新构建依赖，你可以用。
vue项目中修改element-ui源码，如何运用到项目中 (修改 node_modules 里的文件,并应用)
D_Z_Yong的博客
09-09 7080
由于element组件不满足项目的需要，需要对源码进行修改，如何在使用到项目中，发现直接修改源码以后不生效，原因是因为其实项目中所引用的并不是直接源码，而是通过打包好后的lib文件。源码只是相当于提供给你参考的，整个项目的运行，靠的都是lib文件夹下的打包文件。 如果修改呢 第一步，实现从git上拉取element的源码 第二步，安装依赖 npm install，并跑起项目 第三步，修改packages中的源码，再进行打包（npm run dist） 最后一步，找到你的项目中的node_modules包下的
vue+springboot最佳项目实践源码
03-28
vue+springboot最佳项目实践源码
Vue项目打包编译优化方案
10-14
当一个较复杂的vue项目打包后，文件会非常大，而且访问时资源加载速度很慢，本文介绍了几种措施来优化。
vue2.0 项目实战，包含源码，免费赠送
11-17
vue2.0 项目实战-新闻客户端 ，免费赠送，价值1999元的资料免费送
vue 项目源码
08-07
一个公司做的vue项目，基本vue的功能都用到了，源码请勿举报
猿创征文｜Vue源码分析（插件编写）
mkbird的博客
09-09 386
插件的本质其实是一个普通函数，因此插件往往会结合mixin使用，即将重复的代码混入到Vue实例中，供组件复用。但是mixin是全局api，他会被应用到所有实例中。比较危险(doge)因此较为优秀的方法是使用插件包裹，因为插件会自动删除且更加便于理解。所以我们推荐使用Vue.use这里我们先抛出一个定义插件方法的结论，避免对之后的内容产生误解。// install第一个参数为Vue，第二个参数为数据 插件对象 . install = function(Vue , options) {
Vue项目修改第三方依赖中的方法
weixin_45902966的博客
04-13 3819
前置知识 在前端工程化项目中，一定会存在一个package.json 的文件，它就像一个大管家，管理着这个项目的相关信息。其中会dependencies会存储该项目的依赖关系，当我们初始化一个项目时，会npm包管理器会自动把这些依赖下载到node_modules 文件夹内。 需求来源 公司的项目中使用到了某个第三方的库，但该库有个方法Fun有一丝丝不符合项目的需求，因此萌发修改第三方依赖库A方法的想法。 修改方法 直接拷贝该第三方库的所有文件放置到自己的项目中 (不推荐)。 缺点: 以我自身需求为例
vue - 修改ElementUi源码
細水、長流√的专栏
11-05 2203
在node_modules下找到elementui下的packages找到input组件，进去修改。之后保存重启项目 >> 你会发现没有效果。
手把手教你使用patch-package给npm包打补丁
砖业二十年
10-09 4482
属性限制不符合预期，当输入中文字符时，该属性会将与中文对应的预输入拼音字数一同限制，导致汉字输入长度受阻。事情往往不是预期的那么顺利，本以为一波愉快升级已经完美的解决了问题，不料好景不长一周后小A同学发来问候：“我发现antd。为了避免 v4.15.3 版本之前的其他组件存在未知bug，本次补丁我们基于 4.15.3 版本给 upload 组件打补丁。遇到这种问题和大多数人一样，我首先想到的就是升级antd到最新版本，于是二话不说一顿操作，升级完后果然问题迎刃而解~组件存在一个bug，该bug表现为。
Vue的render函数&修改默认配置
路人的博客
08-24 825
提示：你使用的vue时残缺(精简)版本的（缺少模板解析器），并给了你两个解决方案，一个是使用render，另一个是引入完整版的vue(包含模板解析器)而不是残缺版。render箭头函数的简写形式，第一个参数是（h2）是html5种的内置标签，第二参数是内容。写了vue.config.js文件，里边的配置项就不要全部注释，需要写上新的配置。render是一个函数，vue帮你调用，调用时给你传递一个参数（帮你创建一个具体元素的参数）使用之前的单文件组件中的写法修改main.js,精简一下js，看效果。
yarn安装vue源码依赖包
08-19
使用yarn安装vue源码依赖包的步骤如下： 1. 首先，你需要在终端或命令行中进入到Vue源码项目的根目录下。 2. 接下来，运行以下命令来安装项目的依赖包： ``` yarn install ``` 这个命令会根据项目根目录下的`package.json`文件中的配置信息自动下载并安装所需的依赖包。使用yarn安装依赖包可以确保依赖版本的一致性和稳定性。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue依赖包管理工具Yarn的初步使用](https://blog.csdn.net/server_404/article/details/106214903)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [基于JavaScript和Vue的光伏监控管理系统项目源码及项目使用说明.zip](https://download.csdn.net/download/DeepLearning_/87545343)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

白云苍狗い

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值