如何修改node_modules源码

我们在开发时，经常遇到需要修改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 中加入 "postinstall": "patch-package"。

3、打补丁

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

npx patch-package vue-design

运行后：

 

根目录下会多一个patchs补丁目录：

打开里面的文件可以看到我们修改的内容：

diff --git a/node_modules/view-design/package-lock.json b/node_modules/view-design/package-lock.json
new file mode 100644
index 0000000..61364ea
--- /dev/null
+++ b/node_modules/view-design/package-lock.json
@@ -0,0 +1,13 @@
+{
+  "name": "view-design",
+  "version": "4.7.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmmirror.com/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
+    }
+  }
+}
diff --git a/node_modules/view-design/src/components/button/button.vue b/node_modules/view-design/src/components/button/button.vue
index b1905de..360d060 100644
--- a/node_modules/view-design/src/components/button/button.vue
+++ b/node_modules/view-design/src/components/button/button.vue
@@ -2,7 +2,7 @@
     <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></span>
+        <span v-if="showSlot" ref="slot"><slot></slot>test</span>
     </component>
 </template>
 <script>
@@ -68,6 +68,7 @@
             },
             classes () {
                 return [
+                    'hello',
                     `${prefixCls}`,
                     `${prefixCls}-${this.type}`,
                     {
@@ -103,6 +104,7 @@
         methods: {
             // Ctrl or CMD and click, open in new window when use `to`
             handleClickLink (event) {
+                alert(1)
                 this.$emit('click', event);
                 const openInNewWindow = event.ctrlKey || event.metaKey;
 

测试补丁是否有效

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

提交补丁

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

作者：姜治宇
链接：https://www.jianshu.com/p/4ebacfcd139a
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。