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

相关推荐
知识分享小能手2 小时前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
MC丶科4 小时前
【SpringBoot 快速上手实战系列】5 分钟用 Spring Boot 搭建一个用户管理系统(含前后端分离)!新手也能一次跑通!
java·vue.js·spring boot·后端
90后的晨仔6 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js
90后的晨仔6 小时前
Vue3 状态管理完全指南:从响应式 API 到 Pinia
前端·vue.js
90后的晨仔6 小时前
Vue 内置组件全解析:提升开发效率的五大神器
前端·vue.js
我胡为喜呀6 小时前
Vue3 中的 watch 和 watchEffect:如何优雅地监听数据变化
前端·javascript·vue.js
Sheldon一蓑烟雨任平生9 小时前
Vue3 列表渲染
vue.js·vue3·v-for·列表渲染·vue3 列表渲染·v-for 循环对象·v-for与计算属性
鹿鹿鹿鹿isNotDefined10 小时前
Pixelium Design:Vue3 的像素风 UI 组件库
前端·javascript·vue.js
武昌库里写JAVA11 小时前
C语言 函数指针和指针函数区别 - C语言零基础入门教程
vue.js·spring boot·sql·layui·课程设计
Itai11 小时前
自定义 markdown 解析规则并渲染 Vue 组件
vue.js