English | 简体中文
A Vite plugin for qiankun micro-app. Support Vue and React.
-
Zero-Setup, just add the plugin and run.
-
Keep ESM features of Vite.
-
Support React HMR (and other library using inline ESM).
-
No side effects, can run independently or within qiankun.
-
Can cooperate with vite-plugin-dynamic-base for multi-environment deployment.
npm i vite-plugin-qiankun-x -DAdd plugin at vite.config.js.
import { defineConfig } from 'vite'
import qiankun from 'vite-plugin-qiankun-x'
export default defineConfig({
plugins: [qiankun('your-micro-app-name')],
})Of course, you must export lifecycle hooks in your entry script (Normally main.ts). It is required by qiankun.
export function bootstrap() { /* ... */ }
export function mount(props) { /* ... */ }
export function bootstrap() { /* ... */ }Dynamically importing ESM will cause the script to escape the js sandbox environment. If we cann't avoid set/get window, we need to use an exposed proxy windowX.
windowX.val = "Hello World"; // set
windowX.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ // getWhen multiple micro-apps are running in qiankun at the same time, windowX always points to the window proxy of the last loaded micro-app. At this time we need to use windowXs instead of windowX.
windowXs["your-micro-app-name"].val = "Hello World"; // set
windowXs["your-micro-app-name"].__INJECTED_PUBLIC_PATH_BY_QIANKUN__ // getVite doesn't support runtime publicPath like webpack_public_path. We can use vite-plugin-dynamic-base instead. It will modify our script src, so we need to use urlTransform to correct it.
import { defineConfig } from 'vite'
import qiankun from 'vite-plugin-qiankun-x'
import { dynamicBase } from 'vite-plugin-dynamic-base'
export default defineConfig({
plugins: [
qiankun('your-micro-app-name', {
// correct the script src
urlTransform: (ori) => ori.replace('/__dynamic_base__', ''),
}),
dynamicBase({
publicPath: 'window.__dynamic_base__',
transformIndexHtml: true
})
],
base: process.env.NODE_ENV === "production" ? "/__dynamic_base__/" : "/",
})Then assign window.__dynamic_base__ before any code runs. For example, in index.html.
<!-- index.html -->
<html>
<head>
<!-- ... -->
<script>
window.__dynamic_base__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ || ''
</script>
</head>
<!-- ... -->
</html>If we use strict sandbox mode (it is default), the style isolation capability of qiankun will not take effect. Including strictStyleIsolation and experimentalStyleIsolation.
If we use loose sandbox mode. There are also many bugs in these two isolation solutions. This is a logical flaw of qiankun. I have submitted two issues: #3018 and #3019. Once qiankun fixed up, both style isolation solutions will be available.
So currently, we can only rely on micro-apps to handle style isolation on their own. You can use: CSS in JS, Uniform CSS naming prefix, CSS modules.
This plugin is inspired by vite-plugin-qiankun.