vue项目扩展修改node_modules

vue项目扩展修改node_modules

1. 问题背景

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

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

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

我修改了span为div

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

2. 修改思路梳理

既然我们要修改这个node_modules下的源码，那么怎么修改大致可分为两种方案

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

3. 打补丁步骤

1、安装依赖 patch-package

npm install patch-package --save-dev

2、修改脚本 package.json

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

{
  "scripts": {
    "postinstall": "patch-package"
  }
}

3、打补丁

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

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:

import dayGridPlugin from "@fullcalendar/daygrid";

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