vue项目扩展修改node_modules

vue项目扩展修改node_modules

1. 问题背景

在平时的开发中有时会遇到这么一个问题,通过npm下载的一个第三依赖有时并不满足我们的开发需求,即对某一个需求点的个性化修改不太支持,但总体是符合需求的。那么我们就需要对这个第三方依赖进行个性化修改。

比如node_modules的*@fullcalendar/core/main.js*中的下述代码

js 复制代码
if (!forceOff && allOptions.navLinks) {
        return '<a' + attrs +
            ' data-goto="' + htmlEscape(JSON.stringify(finalOptions)) + '">' +
            innerHtml +
            '</a>';
}
else {
    return '<span' + attrs + '>' +
        innerHtml +
        '</span>';
}

我修改了span为div

js 复制代码
if (!forceOff && allOptions.navLinks) {
        return '<a' + attrs +
            ' data-goto="' + htmlEscape(JSON.stringify(finalOptions)) + '">' +
            innerHtml +
            '</a>';
}
else {
    return '<div' + attrs + '>' +
        innerHtml +
        '</div>';
}

2. 修改思路梳理

既然我们要修改这个node_modules下的源码,那么怎么修改大致可分为两种方案
html 复制代码
1.暴力修改: 直接将node_modules中的源码拷贝在项目中,然后直接修改引入。这种方式简单粗暴,但如果你只需要改其中某一个文件,但需要修改的文件有额外引入了很多其他资源就会发现,梳理这些依赖关系变成一件非常恶心的事。
2.对node_modules打补丁:我们可以修改node_modules中的源码,这种修改我们不需要考虑其他资源的依赖关系。但这种修改是临时性,重新下载包的时候就会发现,刚才的更改没有效果,由此这种方式我们需要对node_modules包打补丁来解决该问题。

3. 打补丁步骤

1、安装依赖 patch-package
js 复制代码
npm install patch-package --save-dev
2、修改脚本 package.json

​ 在 package.json 文件中的 scripts 中加入

js 复制代码
{
  "scripts": {
    "postinstall": "patch-package"
  }
}
3、打补丁

@fullcalendar/core被修改了,所以我们要把变化的地方打个补丁上去

js 复制代码
npx patch-package @fullcalendar/core

执行完毕之后:根目录下会多一个patchs补丁目录

4、测试补丁是否有效

删除node_modules目录,然后重新运行npm install,安装完成后,查看你修改的node_modules里面的代码是否还在。如果在,就说明补丁生效了。

5、提交补丁

将补丁文件提交到远程,这样其他同事就拉取后,再执行npm install,就可以看到你修改的代码了

4. 注意事项

有时修改node_modules源码中的文件会发现执行后没有效果可以尝试重启项目,如果重启仍然没有效果,基本可以确定是修改的文件源不对。需要找到正确的入口文件修改,node_modules某个依赖的源码的入口文件基本是index.js或main.js。

但请注意如果你的业务代码使用的是ESM模块化引入 ​ eg:

js 复制代码
import dayGridPlugin from "@fullcalendar/daygrid";

则他的入口文件其实是 main.esm.js或index.esm.js

相关推荐
用户51681661458411 天前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端缘梦1 天前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
Simon_He1 天前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown
王同学QaQ1 天前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
华仔啊1 天前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
艾小码1 天前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
Gracemark2 天前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
天下无贼2 天前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
洋葱头_2 天前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing2 天前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化