关于前端:实践微前端angularqiankunsinglespa从-0-到-1-篇

文章概述

实际微前端 -angular+qiankun – 从 0 到 1 篇

实际微前端 -angular+qiankun – 通信和我的项目 Nginx 公布 曾经在缓和编写测试 ( 欢送回访)

引言

大家好~

本文是基于 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 字段进行判断，判断以后路由是否为主利用路由，最初决定渲染主利用组件或是微利用节点。

因为篇幅起因，款式实现代码就不贴出来了，最初主利用的实现成果如下图所示：

注册微利用

在构建好了主框架后，咱们须要应用 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();

最初，启动咱们的主利用，效果图如下：

因为咱们还没有注册任何微利用，所以这里的效果图和下面的效果图是一样的。
到这一步，咱们的主利用基座就创立好啦！

接入微利用

咱们当初的主利用基座只有一个主页，当初咱们须要接入微利用。

qiankun 外部通过 import-entry-html 加载微利用，要求微利用须要导出生命周期钩子函数（见下图）。

从上图能够看出，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 实用于初始我的项目的生成选择器的前缀。

而后，咱们给子利用增加一些内容，最初成果如下：

注册微利用

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 子组件。

在新建我的项目实现后，咱们创立几个路由页面再加上一些款式，最初成果如下：

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

在组件视图渲染实现后，获取 div 标签然，后手动加载该子利用。
能够两种形式都试一试，依据本人具体的业务场景和需要来抉择应用。

配置微利用

在主利用的工作实现后，咱们还须要对微利用进行一系列的配置。首先，咱们应用 single-spa-angular 生成一套配置，在命令行运行以下命令：

ng add single-spa

ng add single-spa-angular 

在生成 single-spa 配置后，咱们须要进行一些 qiankun 的接入配置。咱们在 Angular 微利用的入口文件 main.single-spa.ts 中，导出 qiankun 主利用所须要的三个生命周期钩子函数，代码实现如下：

从上图来剖析：

• 第 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 微利用 http://localhost:4300。此时咱们的 Angular 微利用被正确加载啦！（见下图）

最终成果

如图可见，咱们的子利用能够独立拜访，也当作一个独自的我的项目运行。也能够加载进主利用当作主基站的一个模块来展现。

我的项目构造总览

最初一件事

如果您曾经看到这里了，心愿您还是点个赞再走吧~

您的点赞是对作者的最大激励，也能够让更多人看到本篇文章！