Vite 項(xiàng)目怎么跑進(jìn) qiankun 微前端vite-plugin-qiankun 快速上手指南【免費(fèi)下載鏈接】vite-plugin-qiankun保留vite es特性快速接入乾坤微前端子應(yīng)用項(xiàng)目地址: https://gitcode.com/gh_mirrors/vi/vite-plugin-qiankun乾坤是主流的微前端框架能把多個(gè)獨(dú)立部署的子應(yīng)用放進(jìn)同一頁(yè)面但它的示例大多基于 webpack 構(gòu)建Vite 項(xiàng)目接入時(shí)?？ㄗ?。vite-plugin-qiankun 是專門(mén)針對(duì)這個(gè)場(chǎng)景的 Vite 插件讓 Vite 子應(yīng)用一行配置接入乾坤全程保留 Vite 構(gòu)建的 ESM瀏覽器原生的 ES 模塊特性不動(dòng)你已有的 Vite 配置。下面以一個(gè) Vite 子應(yīng)用為例把接入走一遍。為什么 Vite 項(xiàng)目接入乾坤會(huì)卡住qiankun 加載子應(yīng)用時(shí)要求子應(yīng)用暴露 bootstrap、mount、unmount 三個(gè)生命周期。常規(guī)做法是把子應(yīng)用用 webpack 打成單文件 bundle 再手寫(xiě)注入腳本等于放棄 Vite 的構(gòu)建優(yōu)勢(shì)。這個(gè)插件的意義在于你不用動(dòng)現(xiàn)有構(gòu)建鏈路加上插件后 Vite 依舊輸出 ESM 模塊它自帶開(kāi)發(fā)模式開(kāi)發(fā)時(shí)子應(yīng)用能被主應(yīng)用直接加載調(diào)試代價(jià)只有一個(gè)ESM 加載不走乾坤的 JS 沙箱寫(xiě) window 時(shí)要顯式使用插件提供的 qiankunWindow 對(duì)象避免污染其它子應(yīng)用。 三步做出一個(gè) Vite 子應(yīng)用第一步安裝插件作為開(kāi)發(fā)依賴添加npm install vite-plugin-qiankun --save-dev第二步在 vite.config.ts 里注冊(cè)子應(yīng)用名要和主應(yīng)用注冊(cè)時(shí)一致生產(chǎn)環(huán)境把 base 指到子應(yīng)用部署的域名// vite.config.ts import qiankun from vite-plugin-qiankun; export default { plugins: [qiankun(myMicroAppName)], base: http://xxx.com/, };第三步在入口文件里聲明乾坤生命周期用 renderWithQiankun 注冊(cè)三個(gè)生命周期獨(dú)立運(yùn)行時(shí)照常渲染即可// main.ts import { renderWithQiankun, qiankunWindow } from vite-plugin-qiankun/dist/helper; renderWithQiankun({ bootstrap() {}, mount(props) { render(props); }, unmount(props) { const root props.container?.querySelector(#root); ReactDOM.unmountComponentAtNode(root || document.querySelector(#root)); }, }); if (!qiankunWindow.__POWERED_BY_QIANKUN__) render({});開(kāi)發(fā)環(huán)境要作為子應(yīng)用調(diào)試時(shí)給插件傳第二個(gè)參數(shù)qiankun(myMicroAppName, { useDevMode: true })。開(kāi)啟后它會(huì)和熱更新插件沖突建議用配置變量切換調(diào)試子應(yīng)用時(shí)關(guān)閉熱更新。 兩個(gè)真實(shí)場(chǎng)景新子應(yīng)用接入、獨(dú)立內(nèi)嵌雙模式最典型的情況是存量 qiankun 體系要新接一個(gè) Vite 子應(yīng)用主應(yīng)用可能還是 webpack子應(yīng)用用 Vite 享受快速冷啟動(dòng)獨(dú)立開(kāi)發(fā)構(gòu)建后部署到指定域名主應(yīng)用注冊(cè)名稱和入口地址就能加載兩套技術(shù)?；ゲ粻窟B。另一個(gè)是日常雙模式開(kāi)發(fā)子應(yīng)用在瀏覽器里單獨(dú)打開(kāi)就能獨(dú)立調(diào)試被主應(yīng)用內(nèi)嵌時(shí)走 mount/unmount 生命周期用 qiankunWindow.POWERED_BY_QIANKUN一行代碼區(qū)分不用維護(hù)兩份入口。周邊伙伴主應(yīng)用、Vite 與示例工程qiankun 負(fù)責(zé)主應(yīng)用一側(cè)的注冊(cè)、加載與沙箱本插件只解決“讓 Vite 的構(gòu)建產(chǎn)物被正確加載”這件事。插件對(duì) vite ≥ 2、typescript ≥ 4 聲明了 peer 依賴和現(xiàn)有配置共存不會(huì)鎖版本。倉(cāng)庫(kù) example/ 目錄下有一個(gè)主應(yīng)用加多個(gè)子應(yīng)用React 18、Vue、Vue3的可運(yùn)行示例跟著 package.json 里的腳本就能跑通全流程。把一個(gè) Vite 項(xiàng)目接進(jìn) qiankun真正要做的就是上面三步配置加生命周期更多細(xì)節(jié)可以查看倉(cāng)庫(kù) README 與 example/ 下的示例工程?！久赓M(fèi)下載鏈接】vite-plugin-qiankun保留vite es特性快速接入乾坤微前端子應(yīng)用項(xiàng)目地址: https://gitcode.com/gh_mirrors/vi/vite-plugin-qiankun創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考