Qiankun 主应用整合 Vite 和 React 子应用：一种快速入门指南

2023-11-03 04:06:32

前言

微前端是一种前端架构模式，它允许我们将前端应用拆分为多个独立的模块或子应用，并在主应用中进行集成。这种架构模式的优点在于：

模块化开发：将应用拆分为多个子应用，可以实现模块化开发，提高代码的可维护性和可复用性。
代码复用：子应用可以相互共享代码，避免重复开发，提高开发效率。
性能优化：子应用可以独立加载和卸载，可以减少主应用的体积，提高性能。

Qiankun 是一个流行的微前端框架，它提供了丰富的功能和完善的文档，可以帮助我们轻松构建微前端应用。本文将演示如何在 Qiankun 主应用中接入 Vite & React 子应用。

安装 Qiankun

首先，我们需要在主应用中安装 Qiankun：

npm install --save qiankun

安装完成后，我们在 src 目录下新建一个 micro.ts 文件，并添加以下代码：

import { createApp } from 'vue';
import singleSpaVue from 'single-spa-vue';
import App from './App.vue';

const vueLifecycles = singleSpaVue({
  createApp,
  appOptions: {
    render() {
      return h(App);
    },
  },
});

export const bootstrap = [
  vueLifecycles.bootstrap,
  vueLifecycles.mount,
  vueLifecycles.unmount,
];

export const mount = [
  vueLifecycles.mount,
];

export const unmount = [
  vueLifecycles.unmount,
];

在 main.tsx 中导入 micro.ts 并配置路由：

import { registerMicroApps, start } from 'qiankun';
import micro from './micro';

registerMicroApps([
  {
    name: 'sub-app',
    entry: '//localhost:3001',
    container: '#sub-app',
    activeRule: '/sub-app',
  },
], {
  qiankunWindow: window,
  plugins: [micro],
});

start();

配置 Vite

接下来，我们需要在子应用中配置 Vite：

npm install --save vite

安装完成后，我们在子应用的根目录下创建一个 vite.config.js 文件，并添加以下代码：

export default {
  plugins: [react()],
};

开发子应用

最后，我们就可以开发子应用了。在子应用的 src 目录下新建一个 App.tsx 文件，并添加以下代码：

import React from 'react';

const App = () => {
  return (
    <div>
      <h1>Sub App</h1>
    </div>
  );
};

export default App;

在子应用的 package.json 文件中添加以下代码：

{
  "name": "sub-app",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}