這幾天在想一個前端團隊的現狀，現在一個前端團隊肯定不止一個項目，而這些前端項目可能都會有一些共用的組件。LQs28資訊網——每日最新資訊28at.com

所以很多公司內部開發了內部的組件庫，以供各個項目去使用，比如下圖，各個項目共同使用同一個組件庫。LQs28資訊網——每日最新資訊28at.com

圖片LQs28資訊網——每日最新資訊28at.com

當組件庫升級的時候，各個項目想要使用最新的組件功能，也得跟著升級依賴組件庫的版本號，并且重新將項目上線，就比如 1.0 -> 2.0。LQs28資訊網——每日最新資訊28at.com

圖片LQs28資訊網——每日最新資訊28at.com

總感覺挺麻煩的，所以在想：有沒有辦法，只需要組件庫升級，而項目并不需要去更新依賴包呢，甚至可以做到項目不需要重新上線，就能獲取最新的組件功能？LQs28資訊網——每日最新資訊28at.com

別把組件庫當依賴包？

剛剛說到當組件庫升級的時候，項目的依賴版本也得跟著升級，那是因為我們項目將組件庫當成了依賴包，放在node_modules 中。LQs28資訊網——每日最新資訊28at.com

那么如果我們可不可以別把組件庫當依賴包呢？也就是我們并不需要去安裝它們，就能使用它們~這樣的話組件庫升級，我們就不用也跟著升級依賴包了~LQs28資訊網——每日最新資訊28at.com

我們去掉了 node_modules 這一層，這樣組件庫升級，我們項目其實也可以做到不去關心版本號。LQs28資訊網——每日最新資訊28at.com

圖片LQs28資訊網——每日最新資訊28at.com

不安裝，怎么使用組件庫？

但是如果我們不安裝，該怎么去使用組件庫呢？其實是有辦法的： 通過HTTP網絡請求去請求組件庫代碼，解析代碼后進行渲染。LQs28資訊網——每日最新資訊28at.com

• 1、將組件庫代碼放在一個靜態服務上
• 2、項目中使用網絡去請求對應的組件代碼
• 3、解析代碼，并進行渲染

這也就是 Vue 的 遠程加載組件。LQs28資訊網——每日最新資訊28at.com

圖片LQs28資訊網——每日最新資訊28at.com

實踐

接下來實踐一下遠程加載組件。LQs28資訊網——每日最新資訊28at.com

Express 搭建靜態服務

先用Express搭建一個簡單的靜態服務，并放置一些組件：LQs28資訊網——每日最新資訊28at.com

• components目錄： 放置一些遠程組件代碼
• index： 靜態服務入口

圖片LQs28資訊網——每日最新資訊28at.com

首先看看 index.js 的代碼，用來作為靜態服務的入口。LQs28資訊網——每日最新資訊28at.com

圖片LQs28資訊網——每日最新資訊28at.com

再分別看看RemoteComp-A.js、RemoteComp-B.js 的代碼，分別是兩個組件的代碼。LQs28資訊網——每日最新資訊28at.com

圖片LQs28資訊網——每日最新資訊28at.com

圖片LQs28資訊網——每日最新資訊28at.com

接著在終端輸入：LQs28資訊網——每日最新資訊28at.com

node index.js

即可啟動服務，現在可以在網頁中看能不能訪問到組件代碼，如果可以說明服務啟動成功了！LQs28資訊網——每日最新資訊28at.com

圖片LQs28資訊網——每日最新資訊28at.com

項目中遠程加載組件

接著需要在項目中去通過網絡請求獲取組件代碼，并進行解析渲染：LQs28資訊網——每日最新資訊28at.com

1、通過fetch去請求對應的組件代碼LQs28資訊網——每日最新資訊28at.com

2、使用new Function進行代碼執行獲取LQs28資訊網——每日最新資訊28at.com

3、傳入 component 的 is 進行渲染LQs28資訊網——每日最新資訊28at.com

圖片LQs28資訊網——每日最新資訊28at.com

最終能達到加載遠程組件的效果~LQs28資訊網——每日最新資訊28at.com

圖片LQs28資訊網——每日最新資訊28at.com

LQs28資訊網——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-101849-0.htmlVue 組件管理的新趨勢！以后可能不再需要組件庫了？

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 云音樂服務端大規模自動化升級實踐

下一篇： 阿里面試官：Redis的分布式鎖和Zookeeper的有啥區別？為啥要用它？