⚠️本文為部落格園社群首發文章,未獲授權禁止轉載
大家好,我是aehyok?,一個住在深圳城市的佛系碼農??♀️,如果你喜歡我的文章?,可以通過點贊幫我聚集靈力⭐️。
個人github倉庫地址: https:github.com/aehyok
本文講解微前端qiankun demo倉庫地址 : https:github.com/aehyok/vue-qiankun 目前基於dev分支進行開發和測試
本demo已部署騰訊雲 http://139.186.205.7:8080/(伺服器配置較低,如有訪問比較慢,請耐心等待)
微前端的講解概念和理論的文章非常多,這裡我就不談了,我講的肯定沒有他們好。同樣的github上的demo也非常多,然後我在公司專案引入時還是發現了許多問題,可能是時間太過於倉促,在github上clone下來的demo就真的是demo級別,根本談不上應用。於是乎,我在公司微前端專案穩定了一段時間後,對qiankun乾坤微前端專案進行了簡單的整理,特此發文進行記錄,以及讓更多入門的程式yuan們,在接觸qiankun乾坤微前端框架時能夠更快速的找到問題所在。
首先說一下,qiankun微前端在公司應用中解決了那些問題
-
1、專案大了之後改動一處便要將前端專案進行全部打包,而且打包時長有時候都可以喝一杯咖啡了。
-
2、多人協作,無論使用的什麼框架都可以進行接入,react、vue、angular、jQuery、原生JS,由於公司有人比較喜歡使用原生JS,主要是歷史悠久,封裝了一套原生的JS庫。
-
3、經常性的出現git提交程式碼發生衝突的問題,主要是解決合併程式碼解決衝突的能力不夠,對git只會常用操作。
使用之後的感受
-
1、哪裡有問題需要進行變更改動,便打包那個子系統即可。(當然也存在都要進行打包的情況,比如新增需求等等)
-
2、每個子系統可獨立發揮團隊中每個人的優勢,使用自己熟悉的框架進行快速開發。
-
3、發生衝突的概率小了,不能說不存在了,同一個子系統有時候也是多個人一起協作的。還是要從根本上解決自身問題,使用git解決程式碼衝突的能力。
當前專案目錄如下(暫時拋棄其他沒有使用到的檔案和資料夾)
├── common/ # 存放共用的工具庫
├── components/ # 存放公共的元件庫
├── main-vite-app-ts/ # 存放主應用 main-vite-app-ts 的資料夾
|── webpack-app/ # 存放微應用 webpack-app 的資料夾
|── map-app/ # 存放微應用 map-app 的資料夾
|——..... # 後續新增使用之後,再進行對應的補充
|——qiankun.conf # 專案部署的nginx基礎配置檔案
|——build.sh # 通過指令碼對主應用和子應用進行統一的打包
1、main-vite-app-ts 主應用開發環境啟動後的訪問地址 http://localhost:1000
-
使用 Vue3 + Vite2 +TypeScript + Element Plus 搭建
-
vite2一款新的打包工具,打包的時候真的就比webpack要快,尤其是開發環境中,但畢竟是一個新的工具,目前還有非常多的缺陷
-
目前用於qiankun的限制,子應用使用vite2進行打包沒那麼方便,故只在主應用中使用vite2,待qiankun乾坤更新後再使用到子應用中
-
主要負責搭建專案的整體佈局,頂部導航欄和左側選單列表,以及登入頁面等404通用頁面佈局
-
負責子應用的註冊引入和管理(可動態管理子應用)
2、webpack-app 微應用開發環境啟動後的訪問地址 http://localhost:4000
-
使用 Vue3 + webpack + Element Plus 搭建
-
引用自己封裝的元件 aehyok-form-vue3 進行demo頁面的初始化,包括動態form表單和動態table列表,以及json閱讀器
-
根據json配置物件直接生成動態form表單,目前已經完成基本架構,待有時間繼續完善細節
-
根據son配置物件直接生成動態table列表,目前剛剛開始,很多功能還需要調整,已經在公司專案中使用,後期可能存在重構的情況,持續完善中
-
使用ffmpeg通過webassembly對視訊進行前端轉碼功能的實現,目前demo可以檢視,具體細節功能待後續完善
3、map-app 微應用開發環境啟動後的訪問地址 http://localhost:5000
-
使用 Vue3 + webpack + Element Plus +TypeScript 搭建
-
使用leaflet展示地圖並對基本圖層進行處理
-
使用leflet-geoman處理點座標和多邊形座標組的編輯
-
同時在該微應用專案中正在嘗試vue3的hooks(學習中)
4、common 公用方法庫
使用方法:通過在檔案上import 相對路徑的方式引入
-
封裝常用element-plus彈窗
-
封裝請求 axios(準備使用typescript)
-
封裝常用表單驗證欄位列表
-
封裝常用字串處理、陣列處理、等等
-
封裝常用日期轉換、以及日期格式等
-
封裝常用cookie、locaStorage、Web Sql 儲存
-
封裝一些常用的演算法
5、components 共用元件庫
使用方法:通過在檔案上import 相對路徑的方式引入(qiankun乾坤共享元件這塊還不成熟,可參考webpack5中聯邦模組 Module Federation)
-
動態form表單生成器(已單獨抽離到npm發包,具體可檢視aehyok-form-vue3)
-
動態table表單生成器(已單獨抽離到npm發包,具體可檢視aehyok-form-vue3)
-
檔案上傳元件
-
下拉樹元件
-
富文字編輯元件
-
等等,日常中使用的各種可複用的元件
6、專案線上部署前的打包(通過指令碼批量進行編譯打包:專案根目錄build.sh打包指令碼)
通過 sh build.sh 執行指令碼(如有使用請進行調節各個目錄)當然你可以使用其他自動化的各種工具
## 1、當前指令碼檔案所在路徑
current_path=$(cd $(dirname $0); pwd)
version='V0.1.0.0012'
## 列印當前目錄
echo $current_path
# 列印當前目錄檔案列表
# echo $a*
#-----------------------------1、需要拉取的專案路徑------------------
## 專案倉庫本地檔案路徑
base_url ='/e/work/aehyok/github/vue-qiankun'
## 開始pull拉取專案
project_path=${base_url}
cd $project_path
git pull
echo -e "\033[32m拉取專案:${project_path} 成功\033[0m";
#-------------------------2、設定需要編譯的專案路徑----------------------
npmbuild_pathArr=(
"/e/work/aehyok/github/vue-qiankun/main-vite-app-ts" #主應用
"/e/work/aehyok/github/vue-qiankun/webpack-app" # webpack-app 子應用
"/e/work/aehyok/github/vue-qiankun/map-app" #map-app 子應用
)
#-------------------------3、 開始 build 專案--------------------------
for ((i=0;i<${#npmbuild_pathArr[*]};i++))
do
project_path=${npmbuild_pathArr[i]}
cd $project_path
yarn build
echo -e "\033[32m編譯專案:${npmbuild_pathArr[i]} 成功\033[0m";
done
#-------------------------4、 開始拷貝檔案到伺服器----------------------
# /e/work/aehyok/github/qiankun 是我本地打包後的資料夾
scp -r /e/work/aehyok/github/qiankun/main root@139.186.205.7:/usr/local/qiankun/main/
######、拷貝完之後進行git 的提交
cd /e/work/aehyok/github/qiankun
## git add .
## git status
## sleep 1s
## message="chore:build.sh 指令碼打包 commit-version:${version}"
## git commit -m $message .
## git push origin
echo "5秒後將自動退出本指令碼:"
for i in $(seq 5 -1 1)
do
echo -e $i;sleep 1
done
exit
## 執行指令碼 sh build.sh
7、打包和部署(倉庫根目錄qiankun.conf)
-
目前自己的專案部署在騰訊雲上,通過nginx進行承載,灰常之方便
server { listen 8080; server_name localhost; location / { root /usr/local/qiankun/main/; index index.html; } }
-
主應用部署在一級目錄模式為 hash模式,子應用部署在二級目錄模式也為 hash
-
目前主要是一個主應用和兩個微應用,打包後部署目錄結構如下
└── main/ # 根資料夾
|
├── child/ # 存放所有微應用的資料夾
| ├── webpack-app/ # 存放微應用 webpack-app 的資料夾
| ├── map-app/ # 存放微應用 map-app 的資料夾
├── index.html # 主應用的index.html
├── css/ # 主應用的css資料夾
├── js/ # 主應用的js資料夾
後續迭代更新計劃
上面說的應該都是demo中已經有的,或者正在進行優化中的。下面說的將會是繼續優化,或者是將來有時間可能要做的一些思考吧。下面列舉的是將要做,或者未來要做的(可能工作中如果有用到的進度就會在哪裡,慢慢優化實踐)
-
1、管理子系統模組的功能(目前資料全部通過介面獲取)
-
2、管理子系統選單的功能(目前資料為靜態的配置檔案)
-
3、管理授權的功能
-
4、管理下拉選單資料的字典功能
-
5、優化form表單生成器
-
6、優化table列表生成器
-
7、優化leaflet和geoman編輯圖層的功能
-
8、cesium.js 實現2.5d或者3d地圖視覺化的功能
-
9、低程式碼和無程式碼工具的思考和實踐
-
10、後期考慮接入後端api(java、nodejs或者.net core),對資料進行管理(目前通過rap2進行模擬api資料只能讀)
-
11、大後期前後端一起考慮做一些從前端到後端一起減少工作量的封裝
- 12、考慮子應用也可以單獨登入、單獨執行,新增一個模板。
目前本專案所使用的一些常用開源框架如下
├── aehyok-form-vue3 # 自己封裝的json表單生成器,JSON Table列表生成器、JSON閱讀器 架構已有,待優化細節
├── qiankun # 微前端搭建框架,在主應用中
├── leaflet and geoman # web地圖展示和編輯圖層的元件,在map-app子應用中
├── rap2 # 本專案靜態資料都放到了rap2中,作為一個api資料提供者,很方便
├── swiper # 可實現很多效果的輪播圖
├── @ffmpeg/ffmpeg # 視訊轉碼工具可通過wasm呼叫
├── swiper # 可實現很多效果的輪播圖
├── vuex-persistedstate # 針對vuex 進行快取設定
├── v-contextmenu # 滑鼠右鍵事件觸發彈窗
├── jsoneditor # json閱讀編輯器
├── ......後續慢慢寫進來
目前使用qiankun框架過程中,遇到的一些問題
-
1、主應用中引入qiankun 乾坤框架,注意主應用註冊微應用、載入微應用的時機,vue中應該在mounted或者onMounted中執行start(),要不然可能找不到我們定義的dom節點,因為頁面還沒有進行載入。
-
2、子應用中引入百度地圖如果升級無法解決,建議將地圖放到主應用載入,微應用也引入這個地圖 js(獨立執行時使用),但是給 script 標籤加上 ignore 屬性。
-
3、目前登入後的認證狀態,儲存在localStorage中,可實現主應用和子應用中共享訪問快取
-
4、子應用中的返回上一頁的呼叫無法使用vue3 路由中的 router.go(-1) ,需要使用window.history.go(-1), 待檢視原始碼查證問題
-
5、微應用打包之後 css 中的字型檔案和圖片載入 404 --建議檢視https://qiankun.umijs.org/zh/faq#%E5%BE%AE%E5%BA%94%E7%94%A8%E6%89%93%E5%8C%85%E4%B9%8B%E5%90%8E-css-%E4%B8%AD%E7%9A%84%E5%AD%97%E4%BD%93%E6%96%87%E4%BB%B6%E5%92%8C%E5%9B%BE%E7%89%87%E5%8A%A0%E8%BD%BD-404
-
6、qiankun 將會自動隔離微應用之間的樣式(開啟沙箱的情況下),start方法中會有對應的引數設定
最後的最後
https://github.com/aehyok/vue-qiankun
本文中不涉及到程式碼,有關程式碼問題可以訪問文章開頭的微前端github demo 倉庫,github倉庫將會保持持續更新,不斷優化小demo。
https://github.com/aehyok/vue3-ele-form
同時對json資料配置生成動態form表單和table列表也會持續優化,目前剛剛在公司專案中嘗試,等機會合適可能就讓同事一起參與進來。
https://github.com/aehyok/2021
最後自己每天工作中的筆記記錄倉庫,主要以文章連結和問題處理方案為主。