如何修改 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 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

根目錄下會多一個 patchs 補丁目錄：

4、測試補丁是否有效

刪除 node_modules 目錄，然後重新運行 npm install，安裝完成後，查看你修改的 node_modules 裏面的代碼是否還在。如果在，就說明補丁生效了。

5、提交補丁

將補丁文件提交到遠程，這樣其他同事就拉取後，再執行 npm install，就可以看到你修改的代碼了，肥腸方便。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/Ic0BULa4OdXjMve8pUlOGg