3 步接入 qiankun 微前端vite-plugin-qiankun 快速上手教程【免費下載鏈接】vite-plugin-qiankun保留vite es特性快速接入乾坤微前端子應用項目地址: https://gitcode.com/gh_mirrors/vi/vite-plugin-qiankunvite-plugin-qiankun 是一個讓 Vite 項目快速接入 qiankun 微前端框架的 Vite 插件。它保留了 Vite 的 es module 特性子應用只需一行配置就能完成乾坤接入。這篇文章面向剛接觸微前端的新手帶你從零把子應用跑起來。一個插件搞定 Vite 與 qiankun 的對接簡單說它就是Vite 子應用和乾坤主應用之間的翻譯官主應用用 qiankun 來調(diào)度子應用繼續(xù)用 Vite 開發(fā)兩邊互不遷就。子應用代碼自動切分插件會替你處理好子應用的分包把每個子應用的代碼收進獨立的 chunk 里你不用自己去折騰分割配置。公共依賴只加載一次多個子應用共用的依賴會被打包成公共 chunk首次訪問時預加載一遍之后切換子應用直接復用省流量也省時間。沙箱隔離互不打架每個子應用都跑在獨立的沙箱里。同一頁面渲染多個子應用時狀態(tài)和樣式不會串到別人頭上。三步跑起來第 1 步一條命令完成安裝把它裝到子應用項目的開發(fā)依賴里npm install vite-plugin-qiankun --save-dev第 2 步vite.config.ts 里這樣配給插件傳入子應用名這個名字要和主應用注冊時用的 AppName 保持一致// vite.config.ts import qiankun from vite-plugin-qiankun; export default { plugins: [qiankun(my-app)], // 子應用名須與主應用注冊一致 base: http://xxx.com/, // 生產(chǎn)環(huán)境指定運行域名 };開發(fā)環(huán)境想當獨立頁面調(diào)試時base保持默認即可不用額外改動已有的 Vite 配置。第 3 步在入口文件里聲明子應用生命周期借助插件自帶的 helper把乾坤要求的生命周期掛載到全局同時保留獨立運行的能力// main.ts import { renderWithQiankun, qiankunWindow } from vite-plugin-qiankun/dist/helper; renderWithQiankun({ bootstrap() { /* 初始化邏輯 */ }, mount(props) { render(props); }, unmount(props) { /* 卸載邏輯 */ }, }); if (!qiankunWindow.__POWERED_BY_QIANKUN__) { render({}); // 沒跑在 qiankun 里就自行掛載 }到這里子應用既能在主應用里被調(diào)度也能單獨打開頁面自測。避坑與技巧4 個讓接入更順手的細節(jié) ??子應用各自獨立部署讓每個子應用擁有獨立倉庫和獨立構(gòu)建流程發(fā)版互不牽連主應用升級不用等子應用排隊。公共依賴統(tǒng)一管理真正被多個子應用共享的庫如 React 運行時抽出來只加載一次避免每個子應用各拉一份。謹慎往 window 上掛東西由于 es module 的加載方式子應用代碼并不在 qiankun 的 JS 沙盒內(nèi)運行。需要寫全局屬性時用 helper 導出的qiankunWindow顯式操作別直接動window否則可能污染其他子應用。開發(fā)模式下熱更新要讓路開啟useDevMode讓子應用在開發(fā)環(huán)境被主應用加載時會和熱更新插件以及其它改寫 html 的插件沖突二者只能取其一用一個開關(guān)變量切換最省心。相關(guān)實現(xiàn)可看 src/index.ts。周邊生態(tài)一眼看qiankun基于 single-spa 的微前端框架主應用用它注冊、調(diào)度和卸載各個子應用。Vite基于 ES 模塊的構(gòu)建工具秒級熱更新的開發(fā)體驗子應用用它寫代碼。Vue3常用的子應用技術(shù)棧項目里就有現(xiàn)成示例見 example/vue3sub。React另一主流選擇example/react18 演示了 React 18 子應用的接法。主應用側(cè)的完整注冊寫法可以參考 example/main/index.js里面演示了registerMicroApps和start的標準用法。一句話總結(jié)vite-plugin-qiankun 讓 Vite 項目用裝插件、配名字、寫生命周期三步變成合格的 qiankun 微前端子應用接入成本幾乎可以忽略。更多內(nèi)容請查閱 官方 readme動手試錯才是最快的學習方式?！久赓M下載鏈接】vite-plugin-qiankun保留vite es特性快速接入乾坤微前端子應用項目地址: https://gitcode.com/gh_mirrors/vi/vite-plugin-qiankun創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考