如何修改 node_modules 裏的文件（同事看了直呼內行）

前言

有時候使用npm上的包，發現有bug，咱們知道如何修改，可是別人可能一時半會無法更新，或者是咱們特殊需求，別人不肯意修改，這時候咱們只能本身動手豐衣足食。那麼咱們應該如何修改別人的源碼呢？首先，直接修改node_modules裏面的文件是不太行的，從新安裝依賴就沒有了。通常經常使用辦法有兩個：

1. 下載別人代碼到本地，放在src目錄，修改後手動引入。
2. fork別人的代碼到本身倉庫，修改後，從本身倉庫安裝這個插件。

這兩個辦法的缺陷就是：更新麻煩，咱們每次都須要手動去更新代碼，沒法與插件同步更新。若是咱們要修改的代碼僅僅是別人的一個小模塊，其餘大部分代碼都不動，這時候有一個很投機的操做：利用 webpack alias 來覆蓋別人代碼。

webpack alias 的做用

webpack alias通常用來配置路徑別名，使咱們能夠少寫路徑代碼：

chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('#', resolve('src/views/page1'))
      .set('&', resolve('src/views/page2'));
},
複製代碼

也就是說，webpack alias會替換咱們寫的「簡寫路徑」，而且它對node_modules裏面的文件也是生效的。這時候咱們能夠將別人源碼裏面引用模塊的路徑替換成咱們本身的文件。

具體操做以下：

1. 找到別人源碼裏面的須要修改的模塊，複製代碼到src目錄
2. 修改其中的bug，注意裏面引用其餘的文件都須要寫成絕對路徑
3. 找到這個模塊被引入的路徑（咱們須要攔截的路徑）
4. 配置webpack alias

實際操做一下

以qiankun框架的patchers模塊爲例：

文件被引用的路徑爲：./patchers（咱們要攔截的路徑）

文件內容爲：

複製內容到src/assets/patchers.js，修改其 import 路徑爲絕對路徑，並添加咱們的代碼：

配置webpack alias（我用的是vue-cli4，配置文件是vue.config.js）:

const path = require('path');
module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set('./patchers', path.resolve(__dirname, 'src/assets/patchers.js'))
  }
};

複製代碼

運行代碼，控制檯打印成功，代表咱們已經成功覆蓋別人的代碼，並且別人的代碼有更新時，咱們也能夠同步更新，只是這個模塊的代碼使用咱們自定義的。打包以後也是能夠的。

補充：使用patch-package來修改

經掘友 @Leemagination 指點，使用patch-package來修改node_modules裏面的文件更方便

步驟也很簡單：

1. 安裝patch-package：npm i patch-package --save-dev
2. 修改package.json，新增命令postinstall:

"scripts": {
+ "postinstall": "patch-package"
 }
複製代碼

3. 修改node_modules裏面的代碼
4. 執行命令：npx patch-package qiankun。

第一次使用patch-package會在項目根目錄生成patches文件夾，裏面有修改過的文件diff記錄。

當這個包版本更新後，執行命令：git apply --ignore-whitespace patches/qiankun+2.0.11.patch便可。其中qiankun+2.0.11.patch是它生成的文件名。

結尾

這個辦法雖然投機，也有不少侷限性，可是也很好用，技術就是須要不斷的探索。有什麼問題或者錯誤，歡迎指出！