怎么手動(dòng)配置node_modules中的依賴包

本篇內(nèi)容介紹了“怎么手動(dòng)配置node_modules中的依賴包”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

首先，問題是這樣發(fā)生的，在項(xiàng)目中使用pdfvuer第三方插件，要將已經(jīng)蓋章成功的pdf顯示出來，這個(gè)時(shí)候發(fā)現(xiàn)文章可以好好的顯示出來，但是公司的簽章怎么也顯示不出來，這個(gè)時(shí)候終于找到了解決辦法！！但是顯示簽章的修改代碼在依賴包node_modules路徑下，畢竟修改在node_modules下的文件每次npm install都需要手動(dòng)修改。瞬間我就開始難受了，難受難歸難受但還是要想辦法解決滴

起初想到的方案有兩種：

• fork別人的代碼到自己倉庫，修改后，從自己倉庫安裝這個(gè)插件。

• 下載別人代碼到本地，放在src目錄，修改后手動(dòng)引入。這樣做也有很多不便，比如自己單獨(dú)封裝組件既繁瑣又耗時(shí)，而且還會(huì)造成項(xiàng)目看起來比較臃腫。

然而無論是上面哪種辦法都太復(fù)雜了，我就改了某一個(gè)文件了一兩行代碼，卻要如此臃腫的copy整個(gè)項(xiàng)目，最后可能自己都忘了修改了哪里，而且更新麻煩，我們每次都需要手動(dòng)去更新代碼，無法與插件同步更新。 在這種情況下我轉(zhuǎn)頭又開始了我的求知之路。。。然后我就發(fā)現(xiàn)了一個(gè)高大上的解決方案用 patch-package 修改 node_modules 中的依賴包。

解決方案

1. 通過命令安裝  patch-package

`npm install patch-package --save-dev`

2. 修改項(xiàng)目根目錄下的 package.json 文件

在 package.json 文件中的 scripts 中加入 "postinstall": "patch-package"

3. 手動(dòng)修改 node_modules 依賴包中的源碼

4. 手動(dòng)執(zhí)行命令創(chuàng)建 npx patch-package package-name 補(bǔ)丁文件

`npx patch-package package-name`

其中package-name是指要進(jìn)行修改的依賴包名稱。執(zhí)行該命令后會(huì)在項(xiàng)目根目錄中自動(dòng)創(chuàng)建一個(gè) patches 文件夾，該文件夾中就會(huì)出現(xiàn)一個(gè) package-name+version.patch 的補(bǔ)丁文件。如圖：

舉個(gè)示例：我要修改pdfjs-dist下的文件 因此我所執(zhí)行的命令就是：npx patch-package pdfjs-dist

5. 測試補(bǔ)丁包是否有效

手動(dòng)刪除項(xiàng)目中的node_modules文件（強(qiáng)制刪除node_modules文件夾：rimraf node_modules），并重新執(zhí)行npm install命令安裝node_modules依賴包。安裝成功后查看你之前修改的 node_modules 依賴包中的文件，查看你修改的代碼是否依然存在，如果之前修改代碼依然存在即表明補(bǔ)丁文件已經(jīng)生效，如果你之前修改的代碼不存在即表明補(bǔ)丁文件沒有生效。

“怎么手動(dòng)配置node_modules中的依賴包”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！