1. 首页
  2. IT资讯

实践微前端-angular+qiankun+single-spa(从 0 到 1 篇)

引言

大家好~

本文是基于 qiankun + single-spa 的微前端最佳实践系列文章之 从 0 到 1 篇,本文将分享如何使用 qiankun + single-spa 如何搭建主应用基座,然后接入Angular技术栈的微应用,完成微前端架构的从 0 到 1。

本教程采用 Angular 作为主应用基座,接入不同的子Angular项目。

为什么需要微前端(Micro Front-end)

  1. 系统模块增多,单体应用变得臃肿,开发效率低下,构建速度变慢;
  2. 人员扩大,需要多个前端团队独立开发,独立部署,如果都在一个仓储中开发会带来一些列问题;
  3. 解决遗留系统,新模块需要使用最新的框架和技术,旧系统还继续使用。

构建Angular主应用基座

我们先使用 Angular-cli 生成一个 Angular 的项目,初始化主应用。

ng new mango-pro --skipTests=true --style=less --prefix=mango

–style=less 用于样式文件的文件扩展名或预处理器。–skipTests=true 如果为true,则不会为新项目生成”spec.ts”测试文件。

–prefix mango 适用于初始项目的生成选择器的前缀。

在主应用中安装 qiankun

npm i qiankun -S

将普通的项目改造成 qiankun 主应用基座,需要进行三步操作:

  • 创建微应用容器 – 用于承载微应用,渲染显示微应用
  • 注册微应用 – 设置微应用激活条件,微应用地址等等;
  • 启动 qiankun;
创建微应用容器

我们先在主应用中创建微应用的承载容器,这个容器规定了微应用的显示区域,微应用将在该容器内渲染并显示。

我们先设置路由,路由文件规定了主应用自身的路由匹配规则,代码实现如下:

const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    data: { title: '仪盘表' },
  },
]

从上面的分析可以看出,我们使用了在路由表配置的 dashboard 字段进行判断,判断当前路由是否为主应用路由,最后决定渲染主应用组件或是微应用节点。

由于篇幅原因,样式实现代码就不贴出来了,最后主应用的实现效果如下图所示:实践微前端-angular+qiankun+single-spa(从 0 到 1 篇)

注册微应用

在构建好了主框架后,我们需要使用 qiankun 的 registerMicroApps 方法注册微应用,代码实现如下:

import { addGlobalUncaughtErrorHandler, loadMicroApp, registerMicroApps, start } from 'qiankun';
/**
 * 路由监听
 * @param {*} routerPrefix 前缀
 */
function genActiveRule(routerPrefix) {
  // hash 路由设置
  return (location) => location.hash.startsWith(routerPrefix);
  // 普通路由设置
  // return (location) => location.pathname.startsWith(routerPrefix);
}

/**
 * 注册微应用
 * 第一个参数 - 微应用的注册信息
 * 第二个参数 - 全局生命周期钩子
 */
registerMicroApps(
  [
    //        这里注释的是可以借鉴的,之前测试留下的(还是有用的)。为什么放在这里,
    //            因为还会介绍一种在实际项目中手动加载子应用的。
    
    
    // {
    //   name: 'mango-iview', // app name registered
    //   entry: '//localhost:4300',
    //   container: document.getElementById('mango-iview-label'), // 标签id
    //   activeRule: genActiveRule('#/dashboard'),
    //   props: { microName: '我是父应用呀!', micro: 'micro' },
    // },
    // {
    //   name: 'AngularMicroApp', // app name registered
    //   entry: '//localhost:4300',
    //   container: '#angular_micro',
    //   activeRule: genActiveRule('/one'),
    //   props: { microName: '我是父应用呀!' },
    // },
  ],
  {
    // qiankun 生命周期钩子 - 加载前
    beforeLoad: (app: any) => {
      // 加载子应用前,加载进度条
      //   NProgress.start();
      console.log('before load', app.name);
      return Promise.resolve();
    },
    // qiankun 生命周期钩子 - 挂载后
    afterMount: (app: any) => {
      // 加载子应用前,进度条加载完成
      //   NProgress.done();
      console.log('after mount', app.name);
      return Promise.resolve();
    },
  },
);

/**
 * 添加全局的未捕获异常处理器
 */
addGlobalUncaughtErrorHandler((event: Event | string) => {
  console.error(event);
  const { message: msg } = event as any;
  // 加载失败时提示
  if (msg && msg.includes("died in status LOADING_SOURCE_CODE")) {
    console.error("微应用加载失败,请检查应用是否可运行");
  }
});


// 导出 qiankun 的启动函数
export default start;
调用qiankun

我们在注册好了微应用,导出 start 函数后,我们需要在合适的地方调用 start 启动主应用。

我们一般是在入口文件启动 qiankun 主应用,也就是在main.ts中代码实现如下:

import start from './micro/qiankun';

start();

最后,启动我们的主应用,效果图如下:

实践微前端-angular+qiankun+single-spa(从 0 到 1 篇)

因为我们还没有注册任何微应用,所以这里的效果图和上面的效果图是一样的。
到这一步,我们的主应用基座就创建好啦!

接入微应用

我们现在的主应用基座只有一个主页,现在我们需要接入微应用。

qiankun 内部通过 import-entry-html 加载微应用,要求微应用需要导出生命周期钩子函数(见下图)。

实践微前端-angular+qiankun+single-spa(从 0 到 1 篇)

从上图可以看出,qiankun 内部会校验微应用的生命周期钩子函数,如果微应用没有导出这三个生命周期钩子函数,则微应用会加载失败。

如果我们使用了脚手架搭建微应用的话,我们可以通过 webpack 配置在入口文件处导出这三个生命周期钩子函数。如果没有使用脚手架的话,也可以直接在微应用的 window 上挂载这三个生命周期钩子函数。

接入 Angular 微应用

Angular 与 qiankun 目前的兼容性并不太好,接入 Angular 微应用需要一定的耐心与技巧。

对于选择 Angular 技术栈的前端开发来说,对这类情况应该驾轻就熟(没有办法)。

使用 angular-cli 先创建一个 Angular 的项目,在命令行运行如下命令:

ng new mango-iview --skipTests=true --style=less --prefix=iview

–style=less 用于样式文件的文件扩展名或预处理器。–skipTests=true 如果为true,则不会为新项目生成”spec.ts”测试文件。

–prefix iview 适用于初始项目的生成选择器的前缀。

然后,我们给子应用添加一些内容,最后效果如下:
实践微前端-angular+qiankun+single-spa(从 0 到 1 篇)

注册微应用

  1. 在构建好了主框架后,我们需要使用 qiankun 的 registerMicroApps 方法注册微应用,代码实现如下:

(有一点重复但是还是以看懂为主,不然代码不全理解的会很晦涩难懂,一头雾水!)

import { loadMicroApp, registerMicroApps, start } from 'qiankun';
/**
 * 路由监听
 * @param {*} routerPrefix 前缀
 */
function genActiveRule(routerPrefix) {
  // hash 路由设置
  return (location) => location.hash.startsWith(routerPrefix);
  // 普通路由设置
  // return (location) => location.pathname.startsWith(routerPrefix);
}

// loadMicroApp(
registerMicroApps(
  [
    {
      name: 'mango-iview', // app name registered
      entry: '//localhost:4300',
      container: document.getElementById('mango-iview-label'), // 标签id
      activeRule: genActiveRule('#/dashboard'),
      props: { microName: '我是父应用呀!', micro: 'micro' },

    },
    // {
    //   name: 'AngularMicroApp', // app name registered
    //   entry: '//localhost:4300',
    //   container: '#angular_micro',
    //   activeRule: genActiveRule('/one'),
    //   props: { microName: '我是父应用呀!' },
    // },

  ],
  {
    // qiankun 生命周期钩子 - 加载前
    beforeLoad: (app: any) => {
      // 加载子应用前,加载进度条
      //   NProgress.start();
      console.log('before load', app.name);
      return Promise.resolve();
    },
    // qiankun 生命周期钩子 - 挂载后
    afterMount: (app: any) => {
      // 加载子应用前,进度条加载完成
      //   NProgress.done();
      console.log('after mount', app.name);
      return Promise.resolve();
    },
  },
);


// 导出 qiankun 的启动函数
export default start;

这里需要注意路由的设置,是不是hash 类型,如果是的话就和代码一样,如果不是那路由就换成注释的路由代码(具体看代码注释内容:路由监听)。

容器(container)对应的id -> “mango-iview-label” 应该放在index.html中。
但是这样又不符合项目使用,所以之后会介绍手动加载路由的方法。

  1. 手动加载子应用的方法

适用于大多数需要吧子应用放在自己的component组件里面的需求,切换页面也可以卸载A子组件加载B子组件

在新建项目完成后,我们创建几个路由页面再加上一些样式,最后效果如下:
实践微前端-angular+qiankun+single-spa(从 0 到 1 篇)

如图所示在dashboard组件id为”mango-iview-label”的div上面加载子组件iview子应用。

实践微前端-angular+qiankun+single-spa(从 0 到 1 篇)

在组件视图渲染完成后,获取div标签然,后手动加载该子应用。
可以两种方式都试一试,根据自己具体的业务场景和需求来选择使用。

配置微应用

在主应用的工作完成后,我们还需要对微应用进行一系列的配置。首先,我们使用 single-spa-angular 生成一套配置,在命令行运行以下命令:

ng add single-spa
ng add single-spa-angular

在生成 single-spa 配置后,我们需要进行一些 qiankun 的接入配置。我们在 Angular 微应用的入口文件 main.single-spa.ts 中,导出 qiankun 主应用所需要的三个生命周期钩子函数,代码实现如下:
实践微前端-angular+qiankun+single-spa(从 0 到 1 篇)

从上图来分析:

  • 第 18 行:微应用独立运行时,直接执行挂载函数挂载微应用。
  • 第 34 行:微应用导出的生命周期钩子函数 – bootstrap。
  • 第 35 行:微应用导出的生命周期钩子函数 – mount。
  • 第 36 行:微应用导出的生命周期钩子函数 – unmount。

完整代码实现如下:

import { enableProdMode, NgZone } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { Router } from '@angular/router';

import { ɵAnimationEngine as AnimationEngine } from '@angular/animations/browser';

import { singleSpaAngular, getSingleSpaExtraProviders } from 'single-spa-angular';
// 微应用单独启动时运行(不引用单独访问子应用会失败)
import 'zone.js/dist/zone';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { singleSpaPropsSubject } from './single-spa/single-spa-props';
if (environment.production) {
  enableProdMode();
}
// 微应用单独启动时运行
if (!(window as any).__POWERED_BY_QIANKUN__) {
  platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .catch((err) => console.error(err));
}
const lifecycles = singleSpaAngular({
  bootstrapFunction: (singleSpaProps) => {
    singleSpaPropsSubject.next(singleSpaProps);
    return platformBrowserDynamic(getSingleSpaExtraProviders()).bootstrapModule(AppModule);
  },
  template: '<iview-root />',
  Router,
  NgZone,
  AnimationEngine,
});

export const bootstrap = lifecycles.bootstrap;
export const mount = lifecycles.mount;
export const unmount = lifecycles.unmount;

在配置好了入口文件 main.single-spa.ts 后,我们还需要配置 webpack,使 main.single-spa.ts 导出的生命周期钩子函数可以被 qiankun 识别获取。

在pack.json文件里面会自动生成build:microxxxx,和start:microxxxx,我们把端口号修改成我们想要的直接启动就可以了!(见下图)
实践微前端-angular+qiankun+single-spa(从 0 到 1 篇)

修改完成后,我们启动 Angular 微应用http://localhost:4300。此时我们的 Angular 微应用被正确加载啦!(见下图)
实践微前端-angular+qiankun+single-spa(从 0 到 1 篇)

最终效果

实践微前端-angular+qiankun+single-spa(从 0 到 1 篇)

如图可见,我们的子应用可以独立访问,也当作一个单独的项目运行。也可以加载进主应用当作主基站的一个模块来展示。

项目结构总览

实践微前端-angular+qiankun+single-spa(从 0 到 1 篇)

最后一件事

如果您已经看到这里了,希望您还是点个赞再走吧~

您的点赞是对作者的最大鼓励,也可以让更多人看到本篇文章!

本文来自投稿,不代表程序员编程网立场,如若转载,请注明出处:http://www.cxybcw.com/203108.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code