我們在開發(fā)時士聪，經(jīng)常遇到需要修改node_modules源碼的場景，我們希望修改后的源碼下次安裝時還可以使用，并讓團隊的其他成員也能看到谢肾。
我們可以使用patch-package打補丁的方式輕松實現(xiàn)這個目的。
我們以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重新安裝組件庫的時候仍存在眯分。如何實現(xiàn)呢？
1柒桑、安裝patch-package
npm install patch-package --save-dev
2弊决、修改package.json
在 package.json 文件中的 scripts 中加入 "postinstall": "patch-package"。
edit.png
3魁淳、打補丁
因為vue-design被修改了飘诗，所以我們要把變化的地方打個補丁上去：
npx patch-package vue-design
1.png
根目錄下會多一個patchs補丁目錄：
1.png
打開里面的文件可以看到我們修改的內(nèi)容：
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里面的代碼是否還在。如果在息拜，就說明補丁生效了溉潭。
提交補丁
將補丁文件提交到遠程，這樣其他同事就拉取后少欺，再執(zhí)行npm install喳瓣，就可以看到你修改的代碼了，肥腸方便赞别。
