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

相关推荐
JIngJaneIL7 小时前
篮球论坛|基于SprinBoot+vue的篮球论坛系统(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·篮球论坛系统
程序猿阿伟9 小时前
《首屏加载优化手册:Vue3+Element Plus项目提速的技术细节》
前端·javascript·vue.js
麦麦大数据9 小时前
D030知识图谱科研文献论文推荐系统vue+django+Neo4j的知识图谱|论文本文相似度推荐|协同过滤
vue.js·爬虫·django·知识图谱·科研·论文文献·相似度推荐
fruge10 小时前
Vue Pinia 状态管理实战指南
前端·vue.js·ubuntu
绝无仅有11 小时前
某教育大厂面试题解析:MySQL索引、Redis缓存、Dubbo负载均衡等
vue.js·后端·面试
没逛够11 小时前
Vue 自适应高度表格
javascript·vue.js·elementui
苹果醋313 小时前
JAVA面试汇总(二)多线程(五)
运维·vue.js·spring boot·nginx·课程设计
咖啡の猫14 小时前
Vue初始化脚手架
前端·javascript·vue.js
一 乐14 小时前
汽车销售|汽车推荐|基于SprinBoot+vue的新能源汽车个性化推荐系统(源码+数据库+文档)
java·数据库·vue.js·汽车·毕设·汽车个性化推荐
晨枫阳14 小时前
uniapp兼容问题处理总结
前端·vue.js·uni-app