Vite 中文文档

简介


vite-plugin-qiankun: 帮助应用快速接入乾坤的vite插件


保留vite构建es模块的优势
一键配置，不影响已有的vite配置
支持vite开发环境

快速开始


1、在 vite.config.ts 中安装插件

  1. ``` ts
  2. // vite.config.ts

  4. import qiankun from 'vite-plugin-qiankun';

  6. export default {
  7.   // 这里的 'myMicroAppName' 是子应用名，主应用注册时AppName需保持一致
  8.   plugins: [qiankun('myMicroAppName')],
  9.   // 生产环境需要指定运行域名作为base
  10.   base: 'http://xxx.com/'
  11. }
  12. ```

2、在入口文件里面写入乾坤的生命周期配置

  1. ``` ts
  2. // main.ts
  3. import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper';

  5. // some code
  6. renderWithQiankun({
  7.   mount(props) {
  8.     console.log('mount');
  9.     render(props);
  10.   },
  11.   bootstrap() {
  12.     console.log('bootstrap');
  13.   },
  14.   unmount(props: any) {
  15.     console.log('unmount');
  16.     const { container } = props;
  17.     const mountRoot = container?.querySelector('#root');
  18.     ReactDOM.unmountComponentAtNode(
  19.       mountRoot || document.querySelector('#root'),
  20.     );
  21.   },
  22. });

  24. if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
  25.   render({});
  26. }
  27. ```

3、dev下作为子应用调试

因为开发环境作为子应用时与热更新插件（可能与其他修改html的插件也会存在冲突）有冲突，所以需要额外的调试配置


  1. ``` ts
  2. // useDevMode 开启时与热更新插件冲突,使用变量切换
  3. const useDevMode = true

  5. const baseConfig: UserConfig = {
  6.   plugins: [
  7.     ...(
  8.       useDevMode ? [] : [
  9.         reactRefresh()
  10.       ]
  11.     ),
  12.     qiankun('viteapp', {
  13.       useDevMode
  14.     })
  15.   ],
  16. }
  17. ```

上面例子中 useDevMode = true 则不使用热更新插件，useDevMode = false 则能使用热更新，但无法作为子应用加载。

4、其它使用注意点 qiankunWindow

因为es模块加载与qiankun 的实现方式有些冲突，所以使用本插件实现的qiankun 微应用里面没有运行在js沙盒中。所以在不可避免需要设置window上的属性时，尽量显示的操作js沙盒，否则可能会对其它子应用产生副作用。qiankun沙盒使用方式

  1. ``` ts
  2. import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper';

  4. qiankunWindow.customxxx = 'ssss'

  6. if (qiankunWindow.__POWERED_BY_QIANKUN__) {
  7.   console.log('我正在作为子应用运行')
  8. }
  9. ```

例子


详细的信息可以参考例子里面的使用方式

  1. ``` sh
  2. git clone xx
  3. npm install
  4. npm run example:install
  5. # 生产环境调试demo
  6. npm run example:start
  7. # vite开发环境demo, demo中热更新已经关闭
  8. npm run example:start-vite-dev

  10. ```