Vue 組件管理的新趨勢！以后可能不再需要組件庫了？
這幾天在想一個前端團隊的現狀，現在一個前端團隊肯定不止一個項目，而這些前端項目可能都會有一些共用的組件。
所以很多公司內部開發了內部的組件庫，以供各個項目去使用，比如下圖，各個項目共同使用同一個組件庫。
圖片
當組件庫升級的時候，各個項目想要使用最新的組件功能，也得跟著升級依賴組件庫的版本號，并且重新將項目上線，就比如 1.0 -> 2.0。
圖片
總感覺挺麻煩的，所以在想：有沒有辦法，只需要組件庫升級，而項目并不需要去更新依賴包呢，甚至可以做到項目不需要重新上線，就能獲取最新的組件功能？
別把組件庫當依賴包？
剛剛說到當組件庫升級的時候，項目的依賴版本也得跟著升級，那是因為我們項目將組件庫當成了依賴包，放在node_modules 中。
那么如果我們可不可以別把組件庫當依賴包呢？也就是我們并不需要去安裝它們，就能使用它們~這樣的話組件庫升級，我們就不用也跟著升級依賴包了~
我們去掉了 node_modules 這一層，這樣組件庫升級，我們項目其實也可以做到不去關心版本號。
圖片
不安裝，怎么使用組件庫？
但是如果我們不安裝，該怎么去使用組件庫呢？其實是有辦法的： 通過HTTP網絡請求去請求組件庫代碼，解析代碼后進行渲染。
- 1、將組件庫代碼放在一個靜態服務上
- 2、項目中使用網絡去請求對應的組件代碼
- 3、解析代碼，并進行渲染
這也就是 Vue 的 遠程加載組件。
圖片
實踐
接下來實踐一下遠程加載組件。
Express 搭建靜態服務
先用Express搭建一個簡單的靜態服務，并放置一些組件：
- components目錄： 放置一些遠程組件代碼
- index： 靜態服務入口
圖片
首先看看 index.js 的代碼，用來作為靜態服務的入口。
圖片
再分別看看RemoteComp-A.js、RemoteComp-B.js 的代碼，分別是兩個組件的代碼。
圖片
圖片
接著在終端輸入：
node index.js即可啟動服務，現在可以在網頁中看能不能訪問到組件代碼，如果可以說明服務啟動成功了！
圖片
項目中遠程加載組件
接著需要在項目中去通過網絡請求獲取組件代碼，并進行解析渲染：
1、通過fetch去請求對應的組件代碼
2、使用new Function進行代碼執行獲取
3、傳入 component 的 is 進行渲染
圖片
最終能達到加載遠程組件的效果~
圖片
