關於vue中node_modules中第三方模組的修改使用

Yogic發表於2019-05-31

最近用vue在做一個專案,github用上找了一個日曆外掛,intall到了本專案中,配好以後發現外掛的樣式風格和專案總體風格相差較大,所以就像這個改一下外掛風格,

第一種方法:我直接在父元件中將style標籤的scoped的屬性去掉了,在父元件中直接寫了想要的樣式,重疊樣式全部!important,結果確實生效了

 

第二種方法:本想這個要是樣式這麼改,還有路可走;要是外掛的底層方法呢,如果有對外開發的修改入口還行,要是沒有,可咋辦,於是想著能不能直接去改下這個外掛,這樣直接一錘子到底,   

      在node_modules中直接找到了這個外掛,查閱了這

      

剛開始直接啥也沒管,直接改了src下的檔案死活不生效

 

最後看了下這個外掛的package.json;一看,靠,原來主檔案,是dist目錄下的index.js;這個是已經打好的用於生產環境的包,我改的src下的測試環境的檔案,當然無效

 

怎麼辦才能有效呢,當然是重新打包,問題的關鍵是怎樣在node_modules下在這個外掛下重新build,查了這個外掛下,根本沒有這個外掛的node_modules依賴(插一句git檔案到github時node_moudles檔案是忽略的),所以在外掛下直接npm run build各種報錯,

後來想了下,我把這個外掛包拷出來,然後vs開啟,不是沒有node_modules依賴嗎,有package.json。直接npm install ;這樣的package.json裡面的標寫的依賴全部安裝,然後有了依賴,這時去改這個外掛src下的檔案;

改好所有的一切後直接npm run build;重新生成了新的dist 下的index.js;把這個新生成的index.js拷貝覆蓋到原來那個專案下對應的位置,覆蓋,這樣最後的效果妥妥額成功了!哈哈哈!!!

 

 

  總結一下:

      可以看下要修改的node_modules專案中的package.json,裡面會有一個屬性,類似:

      "main": "dist/index.min.js",

      表示的是該專案的入口檔案,我們日常開發的專案中引用的其實就是這一個檔案,若是直接改這個index.min.js,重啟一下就能生效。

      PS: 不過一般入口檔案都是打包後的js,很難直接改,都是改src目錄下的檔案後重新build。

      --------------------問題的關鍵是怎樣在node_modules下在這個外掛下build,查了這個外掛下根本沒有這個外掛的node_modules依賴,所以在外掛下直接npm run build各種報錯,解決方法是拷貝出來改好後直接去覆蓋,

      --------------------一般不建議這麼幹,太暴力了,另外團隊協助時,其他隊友和伺服器上的程式碼不能保持一致

    

 

相關文章