如何修改 node_modules 里的文件

使用 npm上的包，發現有 bug，直接修改node_moddules里的包文件不太好，而且別人本地的包錯誤也會導致項目報錯，可以利用  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來修改

使用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是它生成的文件名。