Skip to content

Latest commit

 

History

History
125 lines (89 loc) · 4.51 KB

README.zh-CN.md

File metadata and controls

125 lines (89 loc) · 4.51 KB

vite-plugin-qiankun-x

Version Languages License Star Download

English | 简体中文

一个Vite插件用于qiankun微应用。支持Vue和React。

特性

  • 零配置，添加插件即可使用。

  • 保留Vite下全部ESM特性。

  • 支持React的热更新（其它使用到内联ESM的库均已支持）。

  • 无副作用。可独立运行也可在qiankun中运行。

  • 可以搭配vite-plugin-dynamic-base实现多环境部署。

安装

npm i vite-plugin-qiankun-x -D

用法

基础用法

在vite.config.js中添加插件。

import { defineConfig } from 'vite'
import qiankun from 'vite-plugin-qiankun-x'

export default defineConfig({
    plugins: [qiankun('your-micro-app-name')],
})

当然，你必须在入口脚本中（通常是main.ts）导出生命周期钩子。因为qiankun需要它。

export function bootstrap() { /* ... */ }
export function mount(props) { /* ... */ }
export function bootstrap() { /* ... */ }

JS沙箱

动态导入ESM会导致脚本脱离js沙箱环境。如果我们不可避免需要set/get window对象。我们需要使用暴露的代理对象windowX。

windowX.val = "Hello World"; // set
windowX.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ // get

当多个微应用同时运行在qiankun中时，windowX总是指向最后加载的微应用的window代理。此时我们需要使用windowXs来替代windowX。

windowXs["your-micro-app-name"].val = "Hello World"; // set
windowXs["your-micro-app-name"].__INJECTED_PUBLIC_PATH_BY_QIANKUN__ // get

多环境部署

Vite暂不支持像webpack_public_path一样的运行时publicPath技术。我们可以使用vite-plugin-dynamic-base代替。但是它会修改我们的脚本文件地址，所以我们需要使用urlTransform去修正。

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', {
            // 修改脚本地址
            urlTransform: (ori) => ori.replace('/__dynamic_base__', ''),
        }),
        dynamicBase({
            publicPath: 'window.__dynamic_base__',
            transformIndexHtml: true
        })
    ],
    base: process.env.NODE_ENV === "production" ? "/__dynamic_base__/" : "/",
})

然后在任何代码执行之前，设置window.__dynamic_base__。比如在index.html中。

<!-- index.html -->
<html>
  <head>
    <!-- ... -->
    <script>
      window.__dynamic_base__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ || ''
    </script>
  </head>
  <!-- ... -->
</html>

样式隔离

如果我们使用严格沙箱模式（它是默认的），那么qiankun提供的两种样式隔离方案将不会生效。包括strictStyleIsolation和experimentalStyleIsolation。

如果我们使用loose沙箱模式。这两种隔离方案也存在不少的bug。这是qiankun逻辑上的漏洞。我已经提交了两个issue：#3018和#3019。一旦qiankun修复，则可以使用这两种样式隔离方案。

所以目前，只能依靠微应用自己去处理样式隔离。可以使用：CSS in JS、统一命名前缀、CSS modules。

致谢

本插件是受vite-plugin-qiankun的启发。