修改node_modules源码，并保存，使用patch-package打补丁

最新推荐文章于 2024-07-02 14:27:56 发布

原创最新推荐文章于 2024-07-02 14:27:56 发布 · 1.8k 阅读

9 ·

CC 4.0 BY-SA版权

你好，如果你感觉文章不错，不如我们一起维护，我在此宣言：文章只会改进绝对不会删除，链接永不失效。大家可以大胆收藏。

文章标签：

#vue.js #node_moudles #修改依赖源码 #webpack #patch-package

webpack 专栏收录该内容

6 篇文章

订阅专栏

这篇博客介绍了如何使用patch-package工具来记录并同步团队中对node_modules内第三方库的修改，避免直接修改带来的协作问题。通过实例演示了对vue-design组件库的修改，详细步骤包括安装patch-package，修改package.json脚本，打补丁，测试补丁有效性以及提交补丁到版本控制系统。

在这里插入图片描述

如何修改node_modules源码？

首先，我们能想到的思路是直接修改第三方库的代码，不过这会带来团队协作的问题，你的改动需要同步到团队所有成员，比较麻烦。

好在，我们可以使用 patch-package 这个库来解决这类问题。一方面，它能记录第三方库代码的改动，另一方面也能将改动同步到团队每个成员。

我们以vue常用的 iview 组件库做实验，先安装一下：

npm install vue-design --save-dev

我们随便修改一行，打开某个文件

// \node_modules\view-design\src\components\button\button.vue
<template>
    <component :is="tagName" :class="classes" :disabled="itemDisabled" @click="handleClickLink" v-bind="tagProps">
        <Icon class="ivu-load-loop" type="ios-loading" v-if="loading"></Icon>
        <Icon :type="icon" :custom="customIcon" v-if="(icon || customIcon) && !loading"></Icon>
        <span v-if="showSlot" ref="slot"><slot></slot>test</span>
    </component>
</template>

在slot后面加了个test，然后我们希望这行修改的代码，在npm install重新安装组件库的时候仍存在。如何实现呢？

1、安装依赖 patch-package

npm install patch-package --save-dev

2、修改脚本 package.json

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

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

3、打补丁

因为vue-design被修改了，所以我们要把变化的地方打个补丁上去：

npx patch-package vue-design

在这里插入图片描述

4、测试补丁是否有效

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

5、提交补丁

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