vite-plugin-qiankun是一个用于在微前端中集成qiankun的vite插件,它允许我们在同一页面中同时运行多个子应用,实现应用的解耦和团队协作。然而,由于各个子应用可能使用相同的CSS类名或样式,这就可能导致样式污染。 vite-plugin-qiankun工作原理 vite-plugin-qiankun通过自动化分包、公共依赖、沙箱隔离等核心功能,实现了微...
Github上有一名开源作者开发了一款Vite插件叫vite-plugin-qiankun,通过这个插件可以在qiankun下走通这两种模式。甚至保留了vite构建模块的优势 修改Vite.config.js 2. 修改子应用的main.ts,将生命周期mount、bootstrap、unmount等通过插件函数renderWithQiankun在其中暴露完成。其他配置与基于webpack构建的子应用相同 ⏰...
System.import 简而言之就是使用 document.createElement('script') 创建脚本,然后 append 到 head 中,加载完再删除。 因为polyfill 代码被 qiankun 劫持了,所以其中 System.import 中使用的 document 也会被劫持,这样一来我们 js,css 沙箱就不会失效了。 systemJSPrototype.createScript=function(url){varscript=docu...
// vite.config.tsimportqiankunfrom'vite-plugin-qiankun';exportdefault{// 这里的 'myMicroAppName' 是子应用名,主应用注册时AppName需保持一致plugins:[qiankun('myMicroAppName')],// 生产环境需要指定运行域名作为basebase:'http://xxx.com/'} ...
通过上面的配置,再次构建,qiankun 可以加载这个子应用了。 其他说明 1. 老旧浏览器的支持 由于我这次的项目是中后台项目,对老旧浏览器的支持诉求不强烈,就没有在项目中做处理。其实 vite 官方也是给了解决方案的,就是@vitejs/plugin-legacy这个插件。
import "./qiankun" 在App.vue挂载微应用节点 代码语言:javascript 复制 微应用micro-vue-app(vue3+vite) qiankun目前是不支持vite的,需要借助插件完成 安装vite-plugin-qiankun 代码语言:javascript 复制 npm install vite-plugin-qiankun 修改vite.config.js 代码语言:javascript 复制 import { defineConfig }...
eslint-plugin-import eslint-plugin-node eslint-plugin-promise npm-run-all rollup rollup-plugin-typescript2 typescript vite Install npm i@consolecore/vite-plugin-qiankun Repository License MIT Unpacked Size 20.1 kB Total Files 11 Tryon RunKit ...
按照qiankun和Garfish等框架的设计理念,巨石应用会拆分为各个应用并独立维护,并在页面上整合各个应用,在用户层感知为一个单品。 二、业界微前端方案难以解决的痛点 但是qiankun和Garfish等框架 是以应用维度进行载入,且是一个比较重量的解决方案 比如我们在业务中会遇到如下问题: ...
import react from '@vitejs/plugin-react'// https://vitejs.dev/config/ export default defineConfig({ plugins: [react()]})可以看出，vite 官⽅已经做了⽐较完善的封装，相较于之前版本，开发体验提升了很多。按照指⽰安装完依赖，启动应⽤以后，速度确实很快。现在我们来做⼀些基本改造。我通常使...
Vite(法语意为 “快速的”,发音 /vit/,发音同 “veet”)是一种新型前端构建工具,能够显著提升前端开发体验。它主要由两部分组成: 一个开发服务器,它基于原生 ES Module提供了 丰富的内建功能,如速度快到惊人的模块热更新(HMR)。 一套构建指令,它使用Rollup打包你的代码,并且它是预配置的,可输出用于生产环境的...