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

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

圖片

當(dāng)組件庫(kù)升級(jí)的時(shí)候，各個(gè)項(xiàng)目想要使用最新的組件功能，也得跟著升級(jí)依賴組件庫(kù)的版本號(hào)，并且重新將項(xiàng)目上線，就比如 1.0 -> 2.0。

圖片

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

別把組件庫(kù)當(dāng)依賴包？

剛剛說(shuō)到當(dāng)組件庫(kù)升級(jí)的時(shí)候，項(xiàng)目的依賴版本也得跟著升級(jí)，那是因?yàn)槲覀冺?xiàng)目將組件庫(kù)當(dāng)成了依賴包，放在node_modules 中。

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

我們?nèi)サ袅?nbsp;node_modules 這一層，這樣組件庫(kù)升級(jí)，我們項(xiàng)目其實(shí)也可以做到不去關(guān)心版本號(hào)。

圖片

不安裝，怎么使用組件庫(kù)？

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

• 1、將組件庫(kù)代碼放在一個(gè)靜態(tài)服務(wù)上
• 2、項(xiàng)目中使用網(wǎng)絡(luò)去請(qǐng)求對(duì)應(yīng)的組件代碼
• 3、解析代碼，并進(jìn)行渲染

這也就是 Vue 的 遠(yuǎn)程加載組件。

圖片

實(shí)踐

接下來(lái)實(shí)踐一下遠(yuǎn)程加載組件。

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

先用Express搭建一個(gè)簡(jiǎn)單的靜態(tài)服務(wù)，并放置一些組件：

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

圖片

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

圖片

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

圖片

圖片

接著在終端輸入：

node index.js

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

圖片

項(xiàng)目中遠(yuǎn)程加載組件

接著需要在項(xiàng)目中去通過(guò)網(wǎng)絡(luò)請(qǐng)求獲取組件代碼，并進(jìn)行解析渲染：

1、通過(guò)fetch去請(qǐng)求對(duì)應(yīng)的組件代碼

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

3、傳入 component 的 is 進(jìn)行渲染

圖片

最終能達(dá)到加載遠(yuǎn)程組件的效果~

圖片