JS微前端MicroApp基礎使用

2022-08-15 18:04:10

1. 介紹

MicroApp 是“京東零售”團隊在2021年7月正式釋出的一個微前端框架，並且拋棄了 Single SPA 的實現理念，基於 CustomElement 和 ShadowDom 來實現。

MicroAPP 宣傳的優勢有以下幾點：

應用接入便捷：主應用只需一行程式碼即可接入一個微應用（有點誇張哈）

零依賴：本身 MicroApp 並不依賴其他第三方庫

框架相容：本身對其他框架應用都做了適配，並且也相容 Vite 和 Webpack 應用

其他基本功能：微前端框架都要實現的功能，比如js沙箱、樣式隔離、資料通訊等

但是因為 MicroApp 依賴 CustomElement 和 proxy，所以瀏覽器相容性需要考慮。不過除了已逝的IE，其他瀏覽器基本都支援。

當然了，因為 MicroApp 釋出比較晚，目前也還在 v1 的 alpha 版本，討論組裡面也經常有反饋bug，所以直接上正式專案還有待考慮。

因為 MicroApp 沒什麼侵入性，所以直接建立用 Vite 建立一個模板專案即可。

npm create vite@latest main-app -- --template vue-ts