零基础轻松入门 qiankun 微前端开发

2023-11-06 10:22:43

介绍

微前端是一种将前端应用程序分解成更小、更独立的模块的架构风格。这使得团队可以更轻松地构建、维护和部署应用程序，并能够更轻松地实现代码复用。

qiankun 是一个用于构建微前端应用程序的 JavaScript 库。它基于 single-spa 框架，提供了开箱即用的功能，可以帮助您轻松地将子应用程序集成到基座应用程序中。

项目创建

首先，我们需要创建一个新的 Angular 项目。我们可以使用以下命令：

ng new main

当询问是否需要路由时，选择 "Yes"。此时，基座项目应该是可以启动，并且没有报错。

qiankun 配置

接下来，我们需要在基座项目中安装 qiankun。我们可以使用以下命令：

ng add single-spa-angular

注意：目前暂不支持 Angular 11。

安装完成后，我们需要在基座项目的 src/main.ts 文件中进行一些配置。首先，我们需要导入 qiankun：

import { singleSpaAngular, registerApplication, SingleSpaAngularOptions } from 'single-spa-angular';

然后，我们需要定义子应用程序的配置信息。我们可以使用以下代码：

const angularLifecycles = singleSpaAngular({
  domElementGetter: () => document.getElementById('qiankun-app'),
  template: '<qiankun-app></qiankun-app>',
  // Register Angular app with single-spa here
  bootstrapFunction: bootstrapFunction
});

其中，domElementGetter 指定了子应用程序的挂载元素，template 指定了子应用程序的 HTML 模板，bootstrapFunction 指定了子应用程序的引导函数。

最后，我们需要将子应用程序注册到基座应用程序中。我们可以使用以下代码：

registerApplication({
  name: 'qiankun-app',
  app: angularLifecycles,
  activeWhen: ['/qiankun-app']
});

其中，name 指定了子应用程序的名称，app 指定了子应用程序的配置信息，activeWhen 指定了子应用程序的激活条件。

子项目创建

接下来，我们需要创建一个子应用程序。我们可以使用以下命令：

ng new sub-app

当询问是否需要路由时，选择 "No"。

子项目配置

在子项目中，我们需要安装 qiankun：

ng add single-spa-angular

安装完成后，我们需要在子项目的 src/main.ts 文件中进行一些配置。首先，我们需要导入 qiankun：

import { singleSpaAngular, withPreloading } from 'single-spa-angular';

然后，我们需要定义子应用程序的配置信息。我们可以使用以下代码：

const angularLifecycles = singleSpaAngular({
  mainModuleId: 'main',
  template: '<sub-app></sub-app>'
});

export function bootstrapFunction(props) {
  return angularLifecycles.bootstrap(props);
}

export const mount = withPreloading(bootstrapFunction);
export const unmount = angularLifecycles.unmount;