Sticky Note | 在 qiankun 主应用中接入 vite & react 子应用

主应用仓库地址 github.com/LuckyChou71…

子应用仓库地址 github.com/LuckyChou71…

主应用

"qiankun": "^2.6.3"


子应用
"react": "^17.0.2",
"react-router-dom": "^5.3.0",
"vite": "^2.8.0"
"vite-plugin-qiankun": "^1.0.11"
复制代码

主应用配置

1. 安装 qiankun

yarn add qiankun
复制代码

2. 配置 qiankun

在项目 src 目录下新建 micro.ts 内容如下

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'react-demo',
    entry: '//localhost:3001',
    // 子应用挂载的结点
    container: '#container',
    // 子应用加载的路由
    activeRule: '/start/react',
  },
]);

start();
复制代码

3. 在主入口文件 main.tsx 中导入 micro.ts

import './micro';
复制代码

4. 配置路由

截取一些路由代码片段

  <Router>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/start/*" element={<Layout />} />
    </Routes>
  </Router>
复制代码

这边的 /start/* 后面的 /* 一定要加上

因为 我们的 /start/react 匹配子应用路由

而子应用也会有自己的路由 所以需要 * 通配符

5. 为子应用创建结点

截取 Layout.tsx 中的一些代码片段

    <main>
      <div className="max-w-full mx-auto py-6 sm:px-6 lg:px-8">
        <div id="container">
          <Welcome />
        </div>
      </div>
    </main>
复制代码

这边为 子应用创建了一个 id 为 container 的结点

这个 id 和 上文中的 micro.ts 中的配置要对应

子应用配置

因为子应用的构建工具使用的是 vite

qiankun 官方现在还暂未支持 所以要引入第三方库 vite-plugin-qiankun

vite-plugin-qiankun 中有两个常用的内容

renderWithQiankun 为子应用导出一些生命周期函数 供主应用在特殊的时机调用

qiankunWindow qiankunWindow.POWERED_BY_QIANKUN 可判断是否在qiankun环境下

改造子应用的入口文件 / 路由

import {
  renderWithQiankun,
  qiankunWindow,
} from 'vite-plugin-qiankun/dist/helper';

function render(props: any) {
  const { container } = props;
  ReactDOM.render(
    // 改造路由 如果是qiankun环境下 则加上主应用中的路由前缀
    <Router
      basename={qiankunWindow.__POWERED_BY_QIANKUN__ ? '/start/react' : ''}
    >
      <App />
    </Router>,
    container
      ? container.querySelector('#root')
      : document.getElementById('root')
  );
}

// some code
renderWithQiankun({
  mount(props) {
    console.log('mount');
    render(props);
  },
  bootstrap() {
    console.log('bootstrap');
  },
  unmount(props: any) {
    console.log('unmount');
    const { container } = props;
    const mountRoot = container?.querySelector('#root');
    ReactDOM.unmountComponentAtNode(
      mountRoot || document.querySelector('#root')
    );
  },
});

if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
  render({});
}
复制代码

配置好后 项目可以正常启动 但是控制台会看到如下报错 具体的 issue 在下方链接

github.com/umijs/qiank…