如何科學(xué)修改node_modules里的文件
前言
有時(shí)候使用npm上的包，發(fā)現(xiàn)有bug，我們知道如何修改，但是別人可能一時(shí)半會(huì)沒(méi)法更新，或者是我們特殊需求，別人不愿意修改，這時(shí)候我們只能自己動(dòng)手豐衣足食。那么我們應(yīng)該如何修改別人的源碼呢？首先，直接修改node_modules里面的文件是不太行的，重新安裝依賴(lài)就沒(méi)有了。一般常用辦法有兩個(gè)：
- 下載別人代碼到本地，放在src目錄，修改后手動(dòng)引入。
- fork別人的代碼到自己倉(cāng)庫(kù)，修改后，從自己倉(cāng)庫(kù)安裝這個(gè)插件。
這兩個(gè)辦法的缺陷就是：更新麻煩，我們每次都需要手動(dòng)去更新代碼，無(wú)法與插件同步更新。如果我們要修改的代碼僅僅是別人的一個(gè)小模塊，其他大部分代碼都不動(dòng)，這時(shí)候有一個(gè)很投機(jī)的操作：利用 webpack alias 來(lái)覆蓋別人代碼。
webpack alias 的作用
webpack alias一般用來(lái)配置路徑別名，使我們可以少寫(xiě)路徑代碼：
- chainWebpack: config => {
- config.resolve.alias
- .set('@', resolve('src'))
- .set('#', resolve('src/views/page1'))
- .set('&', resolve('src/views/page2'));
- },
也就是說(shuō)，webpack alias會(huì)替換我們寫(xiě)的“簡(jiǎn)寫(xiě)路徑”，并且它對(duì)node_modules里面的文件也是生效的。這時(shí)候我們可以將別人源碼里面引用模塊的路徑替換成我們自己的文件。
具體操作如下：
- 找到別人源碼里面的需要修改的模塊，復(fù)制代碼到src目錄
- 修改其中的bug，注意里面引用其他的文件都需要寫(xiě)成絕對(duì)路徑
- 找到這個(gè)模塊被引入的路徑（我們需要攔截的路徑）
- 配置webpack alias
實(shí)際操作一下
以qiankun框架的patchers模塊為例：
文件被引用的路徑為：./patchers（我們要攔截的路徑）
文件內(nèi)容為：
復(fù)制內(nèi)容到src/assets/patchers.js，修改其 import 路徑為絕對(duì)路徑，并添加我們的代碼：
配置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'))
- }
- };
運(yùn)行代碼，控制臺(tái)打印成功，表明我們已經(jīng)成功覆蓋別人的代碼，而且別人的代碼有更新時(shí)，我們也可以同步更新，只是這個(gè)模塊的代碼使用我們自定義的。打包之后也是可以的。
補(bǔ)充：使用patch-package來(lái)修改
經(jīng)掘友 @Leemagination 指點(diǎn)，使用patch-package來(lái)修改node_modules里面的文件更方便
步驟也很簡(jiǎn)單：
- 安裝patch-package：npm i patch-package --save-dev
- 修改package.json，新增命令postinstall:
- "scripts": {
- + "postinstall": "patch-package"
- }
3. 修改node_modules里面的代碼
4. 執(zhí)行命令：npx patch-package qiankun。
第一次使用patch-package會(huì)在項(xiàng)目根目錄生成patches文件夾，里面有修改過(guò)的文件diff記錄。
當(dāng)這個(gè)包版本更新后，執(zhí)行命令：git apply --ignore-whitespace patches/qiankun+2.0.11.patch即可。其中qiankun+2.0.11.patch是它生成的文件名。
關(guān)于這個(gè) loader 我已經(jīng)發(fā)布到 npm 上，有興趣的朋友可以直接調(diào)用 npm install async-catch-loader -D 安裝和研究，使用方法和一般 loader 一樣，記得放在 babel-loader 后面，以便優(yōu)先執(zhí)行，將注入后的結(jié)果繼續(xù)交給 babel 轉(zhuǎn)義
- {
- test: /\.js$/,
- use: [
- "babel-loader?cacheDirectory=true",
- 'async-catch-loader'
- ]
- }
更多細(xì)節(jié)和源代碼可以查看 github，同時(shí)本文對(duì)您有收獲的話(huà)，希望能點(diǎn)個(gè) star，非常感謝~
