您好,登錄后才能下訂單哦!
這篇文章主要講解了修改node_modules里的文件的方法,內(nèi)容清晰明了,對此有興趣的小伙伴可以學(xué)習(xí)一下,相信大家閱讀完之后會有幫助。
前言
有時候使用npm上的包,發(fā)現(xiàn)有bug,我們知道如何修改,但是別人可能一時半會沒法更新,或者是我們特殊需求,別人不愿意修改,這時候我們只能自己動手豐衣足食。那么我們應(yīng)該如何修改別人的源碼呢?首先,直接修改node_modules里面的文件是不太行的,重新安裝依賴就沒有了。一般常用辦法有兩個:
這兩個辦法的缺陷就是:更新麻煩,我們每次都需要手動去更新代碼,無法與插件同步更新。如果我們要修改的代碼僅僅是別人的一個小模塊,其他大部分代碼都不動,這時候有一個很投機(jī)的操作:利用 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里面的文件也是生效的。這時候我們可以將別人源碼里面引用模塊的路徑替換成我們自己的文件。
具體操作如下:
實(shí)際操作一下
以qiankun框架的patchers模塊為例:
文件被引用的路徑為:./patchers(我們要攔截的路徑)
文件內(nèi)容為:
復(fù)制內(nèi)容到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')) } };
運(yùn)行代碼,控制臺打印成功,表明我們已經(jīng)成功覆蓋別人的代碼,而且別人的代碼有更新時,我們也可以同步更新,只是這個模塊的代碼使用我們自定義的。打包之后也是可以的。
補(bǔ)充:使用patch-package來修改
經(jīng)掘友 @Leemagination 指點(diǎn),使用patch-package來修改node_modules里面的文件更方便
步驟也很簡單:
"scripts": { + "postinstall": "patch-package" }
修改node_modules里面的代碼
執(zhí)行命令:npx patch-package qiankun。
第一次使用patch-package會在項(xiàng)目根目錄生成patches文件夾,里面有修改過的文件diff記錄。
當(dāng)這個包版本更新后,執(zhí)行命令:git apply --ignore-whitespace patches/qiankun+2.0.11.patch即可。其中qiankun+2.0.11.patch是它生成的文件名。
看完上述內(nèi)容,是不是對修改node_modules里的文件的方法有進(jìn)一步的了解,如果還想學(xué)習(xí)更多內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。