這幾天在想一個前端團隊的現(xiàn)狀，現(xiàn)在一個前端團隊肯定不止一個項目，而這些前端項目可能都會有一些共用的組件。

所以很多公司內(nèi)部開發(fā)了內(nèi)部的組件庫，以供各個項目去使用，比如下圖，各個項目共同使用同一個組件庫。

圖片

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

圖片

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

別把組件庫當依賴包？

剛剛說到當組件庫升級的時候，項目的依賴版本也得跟著升級，那是因為我們項目將組件庫當成了依賴包，放在node_modules 中。

那么如果我們可不可以別把組件庫當依賴包呢？也就是我們并不需要去安裝它們，就能使用它們~這樣的話組件庫升級，我們就不用也跟著升級依賴包了~

我們?nèi)サ袅?nbsp;node_modules 這一層，這樣組件庫升級，我們項目其實也可以做到不去關心版本號。

圖片

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

但是如果我們不安裝，該怎么去使用組件庫呢？其實是有辦法的： 通過HTTP網(wǎng)絡請求去請求組件庫代碼，解析代碼后進行渲染。

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

這也就是 Vue 的 遠程加載組件。

圖片

實踐

接下來實踐一下遠程加載組件。

Express 搭建靜態(tài)服務

先用Express搭建一個簡單的靜態(tài)服務，并放置一些組件：

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

圖片

首先看看 index.js 的代碼，用來作為靜態(tài)服務的入口。

圖片

再分別看看RemoteComp-A.js、RemoteComp-B.js 的代碼，分別是兩個組件的代碼。

圖片

圖片

接著在終端輸入：

node index.js

即可啟動服務，現(xiàn)在可以在網(wǎng)頁中看能不能訪問到組件代碼，如果可以說明服務啟動成功了！

圖片

項目中遠程加載組件

接著需要在項目中去通過網(wǎng)絡請求獲取組件代碼，并進行解析渲染：

1、通過fetch去請求對應的組件代碼

2、使用new Function進行代碼執(zhí)行獲取

3、傳入 component 的 is 進行渲染

圖片

最終能達到加載遠程組件的效果~

圖片