故事背景：
最近在负责更改公司技术支持中心的bug，这块使用到了一个外部插件v-md-editor（想要了解的小伙伴戳这里：ckang1229.gitee.io/vue-markdow… 。
其中有个赋值代码的功能，icon图标不符合UI的标准，UI自然是希望将图标换成自己设计的。在我的一番努力查找下，发现这个ICON图标是使用插件时候通过VMdPreview.use(createCopyCodePlugin());这样的方式创建的。代码长这样：
module.exports = function (md) {
md.renderer.rules.fence = function () {
var rawCode = fence.apply(void 0, arguments);
- var button = "\n<button class=\"v-md-copy-code-btn\" type=\"button\">\n <i>\n<svg viewBox=\"64 64 896 896\" focusable=\"false\" data-icon=\"copy\" width=\"1em\" height=\"1em\" fill=\"currentColor\" aria-hidden=\"true\">\n <path d=\"M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z\"></path>\n</svg>\n</i>\n</button>";
var finalCode = rawCode.replace('<!--beforeend-->', button + "<!--beforeend-->").replace('v-md-pre-wrapper', 'v-md-pre-wrapper copy-code-mode');
return finalCode;
};
于是我灵机一动，直接将我们自己的ICON替换上去，立时生效！！但是第二天同事拉取代码后，icon依然是原来的样子。。。 噢！！node_modles里的代码更改之后是无效的。。 那我就想办法在mounted中通过获取DOM元素的方式改变ICON图标，这样又遇到了新的问题，点击事件点在ICON上无效，但是点在它的父级BUTTON上是生效的；不知道是不是源代码中点击事件是绑定在$nextTick中有关，如果有了解的大神希望指点一下，绑定点击事件的代码长这样：
function createCopyCodePreview() {
return {
install: function install(VMdEditor) {
if (!VMdEditor.mixins) VMdEditor.mixins = [];
VMdEditor.mixins.push({
mounted: function mounted() {
var _this = this;
this.$nextTick(function () {
var previewEl = getPreviewEl(_this.$el);
previewEl.addEventListener('click', _this.handleCopyCodeClick);
});
},
beforeDestroy: function beforeDestroy() {
var previewEl = getPreviewEl(this.$el);
previewEl.removeEventListener('click', this.handleCopyCodeClick);
},
methods: {
handleCopyCodeClick: function handleCopyCodeClick(_ref) {
var target = _ref.target;
if (isCopyButton(target)) {
var codeWrapper = findCodeWrapperEl(target.parentNode);
if (codeWrapper) {
var code = codeWrapper.querySelector('code').innerText;
(0, _copyToClipboard.default)(code);
this.$emit('copy-code-success', code);
}
}
}
}
});
}
};
}
于是，故事又回到了最初的起点，那么如何正确修改node_modules中的代码呢？ 经过一顿百度，得到了好用的方法：
解决方案：
Step1: 通过命令安装 patch-package
npm install patch-package --save-dev
Step2: 修改项目根目录下的 package.json 文件
在 package.json 文件中的 scripts 中加入 "postinstall": "patch-package"
（图1-2）
Step3: 手动修改 node_modules 依赖包中的源码
（图1-3）
Step4: 手动执行命令创建 npx patch-package package-name 补丁文件
执行命令：npx patch-package package-name
执行该命令后会在项目根目录中自动创建一个 patches 文件夹，该文件夹中就会出现一个 package-name+version.patch 的补丁文件。
其中命令中的 package-name 指的是被修改的依赖包的名字（不是被修改的文件的名字）
举个例子：还是在 图1-3 中我修改的是 iview/dist/index.js 组件依赖包中众多组件中的其中一个组件中的一个文件，在 package.json 文件中包含 node_modules 中所有的依赖包
执行该命令后会在项目根目录中自动创建一个 patches 文件夹，并且该文件夹中出现一个 package-name+version.patch 的补丁文件，如图：
(图1-5)
Step5：测试补丁包是否有效
手动删除项目中的 node_modules 文件，并重新执行 npm install 命令安装 node_modules 依赖包。安装成功后查看你之前修改的 node_modules 依赖包中的文件，查看你修改的代码是否依然存在，如果之前修改代码依然存在即表明补丁文件已经生效，如果你之前修改的代码不存在即表明补丁文件没有生效，你需要从新阅读本篇文章看到底是那个环节出了问题。 Step6:若 Step5 中补丁文件测试成功后就可以将补丁文件推送到远程仓库中
这样，无论是日后自己拉取代码还是团队中其他同事拉取代码，无论 npm install 多少次该补丁文件都会生效。
原文链接：blog.csdn.net/qq_32429257… 这样就达到了自己的目的。针对本文问题如果有更好的解决办法，还是希望小伙伴们多多给些建议！
