微前端框架 single-spa:創(chuàng)建微前端容器應用
微前端框架 single-spa:https://zh-hans.single-spa.js.org/
single-spa:https://single-spa.js.org/ 是一個實現(xiàn)微前端架構的框架。
在 single-spa 框架中有三種類型的微前端應用:
1. single-spa-application / parcel:微前端架構中的微應用,可以使用 vue、react、angular 等框架。
2. single-spa root config:創(chuàng)建微前端容器應用。
3. utility modules:公共模塊應用,非渲染組件,用于跨應用共享 javascript 邏輯的微應用。
創(chuàng)建容器應用
安裝 single-spa 腳手架工具:npm installcreate-single-spa@2.0.3 -g
創(chuàng)建微前端容器應用:create-single-spa
1. 應用文件夾填寫 container
2. 應用選擇 single-spa root config
3. 組織名稱填寫 study
組織名稱可以理解為團隊名稱,微前端架構允許多團隊共同開發(fā)應用,組織名稱可以標識應用由哪個團隊開發(fā)。
應用名稱的命名規(guī)則為@組織名稱/應用名稱,比如@study/todos。
4. 啟動應用:cd ./singletest && npm start
5. 訪問應用:localhost:9000
容器默認代碼解析
src/xx-root-config.js
index.ejs