乾坤微前端如何使用

如何使用乾坤微前端：了解架构、安装依赖、配置主应用、配置子应用

乾坤（qiankun）微前端是基于single-spa的微前端实现方案，具有简单易用、兼容性好、性能优越等特点。了解乾坤微前端的架构、安装依赖、配置主应用、配置子应用是使用乾坤微前端的关键步骤。下面将详细描述如何使用乾坤微前端。

一、了解乾坤微前端架构

乾坤微前端架构基于single-spa框架，核心思想是将不同的前端应用独立开发、部署，并在运行时通过乾坤进行统一管理和加载。通过这种方式，可以实现应用的模块化、独立开发和按需加载。

1、核心组件

乾坤微前端主要包括两个核心组件：主应用和子应用。主应用负责管理子应用的加载和卸载，而子应用则是独立运行的前端应用，每个子应用可以有自己的技术栈和生命周期。

2、运行时动态加载

乾坤通过运行时动态加载的方式，在用户访问页面时按需加载所需的子应用，从而提高首屏加载速度和用户体验。这种方式还允许子应用独立部署和更新，降低了主应用的维护成本。

二、安装依赖

在使用乾坤微前端之前，需要安装相应的依赖包。首先，需要安装qiankun和single-spa的npm包：

npm install qiankun single-spa --save

如果你的项目使用的是yarn，也可以使用以下命令：

yarn add qiankun single-spa

三、配置主应用

主应用负责乾坤微前端的整体管理，包括子应用的注册和生命周期管理。下面是配置主应用的步骤。

1、创建主应用

首先，需要创建一个新的React项目，作为主应用。你可以使用Create React App来快速创建一个React项目：

npx create-react-app main-app

2、注册子应用

在主应用中，需要通过qiankun的registerMicroApps方法来注册子应用。打开src/index.js文件，添加以下代码：

import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
  {
    name: 'react-app',
    entry: '//localhost:7100',
    container: '#yourContainer',
    activeRule: '/react',
  },
  {
    name: 'vue-app',
    entry: '//localhost:7101',
    container: '#yourContainer',
    activeRule: '/vue',
  },
]);
start();

上述代码中，registerMicroApps方法接受一个子应用配置数组，每个配置对象包括子应用的名称、入口、容器和激活规则。start方法用于启动乾坤微前端。

3、配置路由

为了使主应用能够正确加载子应用，需要配置路由。你可以使用React Router来配置路由：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import App from './App';
ReactDOM.render(
  <Router>
    <Switch>
      <Route path="/" component={App} />
      <Route path="/react" />
      <Route path="/vue" />
    </Switch>
  </Router>,
  document.getElementById('root')
);

在上述代码中，定义了三个路由，其中主应用的路由是根路径，子应用的路由是/react和/vue。

四、配置子应用

子应用是独立运行的前端应用，每个子应用可以有自己的技术栈和生命周期。下面是配置子应用的步骤。

1、创建子应用

首先，需要创建一个React项目和一个Vue项目，作为子应用。你可以使用Create React App和Vue CLI来快速创建项目：

npx create-react-app react-app vue create vue-app

2、配置React子应用

在React子应用中，需要配置single-spa-react，以便与乾坤微前端集成。打开src/index.js文件，添加以下代码：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import singleSpaReact from 'single-spa-react';
const reactLifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: App,
  errorBoundary(err, info, props) {
    return <div>This renders when a catastrophic error occurs</div>;
  },
});
export const bootstrap = reactLifecycles.bootstrap;
export const mount = reactLifecycles.mount;
export const unmount = reactLifecycles.unmount;

3、配置Vue子应用

在Vue子应用中，需要配置single-spa-vue，以便与乾坤微前端集成。打开src/main.js文件，添加以下代码：

import Vue from 'vue';
import App from './App.vue';
import singleSpaVue from 'single-spa-vue';
Vue.config.productionTip = false;
const vueLifecycles = singleSpaVue({
  Vue,
  appOptions: {
    render: (h) => h(App),
  },
});
export const bootstrap = vueLifecycles.bootstrap;
export const mount = vueLifecycles.mount;
export const unmount = vueLifecycles.unmount;

4、配置子应用的webpack

为了使子应用能够独立运行和被乾坤微前端加载，需要配置子应用的webpack。在React子应用的webpack.config.js文件中，添加以下配置：

module.exports = {
  devServer: {
    port: 7100,
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  output: {
    library: 'reactApp',
    libraryTarget: 'umd',
    jsonpFunction: `webpackJsonp_reactApp`,
  },
};

在Vue子应用的vue.config.js文件中，添加以下配置：

module.exports = {
  devServer: {
    port: 7101,
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  configureWebpack: {
    output: {
      library: 'vueApp',
      libraryTarget: 'umd',
      jsonpFunction: `webpackJsonp_vueApp`,
    },
  },
};

五、启动和验证

完成上述配置后，可以启动主应用和子应用，并进行验证。

1、启动主应用

在主应用目录下，运行以下命令启动主应用：

npm start

2、启动子应用

在React子应用和Vue子应用目录下，分别运行以下命令启动子应用：

npm start

3、验证微前端效果

打开浏览器，访问http://localhost:3000（假设主应用运行在3000端口），然后访问/react和/vue路径，验证子应用是否能够正确加载和运行。

六、进阶配置和优化

为了提升乾坤微前端的性能和用户体验，可以进行一些进阶配置和优化。

1、资源预加载

乾坤微前端支持资源预加载，以提高子应用的加载速度。可以通过preloadApp方法进行资源预加载：

import { preloadApp } from 'qiankun';
preloadApp({ name: 'react-app', entry: '//localhost:7100' });
preloadApp({ name: 'vue-app', entry: '//localhost:7101' });

2、错误处理

为了提高系统的稳定性，可以在主应用中添加错误处理逻辑：

import { addGlobalUncaughtErrorHandler } from 'qiankun';
addGlobalUncaughtErrorHandler((event) => {
  console.error(event);
});

3、性能优化

可以通过懒加载、代码分割等方式优化子应用的性能。例如，在React子应用中，可以使用React.lazy和Suspense进行懒加载：

const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}

七、使用项目管理系统

在使用乾坤微前端进行团队开发时，推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile。PingCode可以帮助团队进行研发过程的管理和协作，而Worktile则提供了全面的项目管理和协作功能，适用于各种团队和项目类型。

1、PingCode

PingCode是一款专为研发团队设计的项目管理系统，提供了需求管理、任务分配、进度跟踪等功能，帮助团队高效协作、提升研发效率。

2、Worktile

Worktile是一款通用项目协作软件，支持任务管理、时间管理、文档管理等功能，适用于各种类型的项目和团队，帮助团队提高协作效率和项目管理水平。

总结

通过了解乾坤微前端的架构、安装依赖、配置主应用和子应用，可以轻松实现微前端架构的搭建和使用。同时，通过资源预加载、错误处理和性能优化等进阶配置，可以进一步提升微前端的性能和用户体验。在团队开发中，推荐使用PingCode和Worktile等项目管理系统，提升团队协作和项目管理效率。