React-qiankun - 溪客(编程代码)

官网

https://qiankun.umijs.org/zh/guide

github

将微应用集成到一个主平台的前端工具，可以理解为是iframe的替代品

ant.design pro 使用

一、安装qiankun

yarn add @umijs/plugin-qiankun -D

二、配置使用

需要配置的地方有两个，

1、qiankun的配置，主要是微服务的配置，指示应该去哪里访问微服务，

2、routes的配置，指定某个路由应该是指向哪个微服务

简单的配置如下：

在config.ts中写qiankun的配置

qiankun: {
  master: {
    // 注册子应用信息
    apps: [
      {
        name: 'app1', // 唯一 id
        entry: '//localhost:7104', // html entry
      },
      {
        name: 'app2', // 唯一 id
        entry: '//localhost:7002', // html entry
      },
    ],
  },
},

在routes.ts中加上路由配置

{
  path: '/abc/123',
  microApp: 'app1',
}

以上就是全部的配置，当访问/abc/123的时候，会路由到microApp: 'app1'，qiankun会打开指定microApp，即entry: '//localhost:7104'

动态指定qiankun的配置

首先config.ts 仍然需要配置qiankun，只是可以不写apps，如下所示

qiankun: {
  master: {

  },
},

在apps.ts中加入如下代码，其中data.apps的结构跟注释的apps类似

export const qiankun = fetch('https://xxxx.com/apps.json?v=4')
.then(res => res.json())
.then((data: any) => {
  // console.log('qiankun', text);
  // const data = JSON.parse(text);
  return {
    // 注册子应用信息
    // apps: [
    //   {
    //     name: 'app1', // 唯一 id
    //     entry: '//localhost:7001', // html entry
    //     base: '/app1', // app1 的路由前缀，通过这个前缀判断是否要启动该应用，通常跟子应用的 base 保持一致
    //     history: 'browser', // 子应用的 history 配置，默认为当前主应用 history 配置
    //   },
    //   {
    //     name: 'app2',
    //     entry: {
    //       // TODO 支持 config entry
    //       scripts: [],
    //       styles: [],
    //     },
    //     base: '/app2',
    //   },
    // ],
    apps: data.apps,
    //jsSandbox: true, // 是否启用 js 沙箱，默认为 false
    //prefetch: true, // 是否启用 prefetch 特性，默认为 true
    lifeCycles: {
      // see https://github.com/umijs/qiankun#registermicroapps
      afterMount: (props: any) => {
        console.log(props);
      },
    },
    // ...even more options qiankun start() supported, see https://github.com/umijs/qiankun#start
  }
});

以上代码实现从后端读取qiankun的配置，即可以由后端来配置微服务的入口

实现动态路由

即希望可以在后台配置路由，参考文章如下：

https://juejin.cn/post/7095996200645558302

https://blog.csdn.net/BLUE_JU/article/details/109467321

里面用到patchRoutes+render，我这边基本配置成功，

但是是“基本”，当点击链接打开后，主程序的layout不见的，也就是没有菜单和头部，不知道如何配置

里面有一个动态加载组件的，用到dynamic，这里需要注意，import的路径是

import { dynamic } from 'umi';

我的实现：

由于我的路由path是比较固定的，/apps/:appName

所以写一个统一处理的component：

MicroAppLayout/index.tsx

import React from 'react';
import { MicroApp } from 'umi';
import { useParams } from 'react-router-dom';

const MicroAppLayout: React.FC = (props: any) => {
    const params: any = useParams()
    const name = params.appName; //注意这里，取的是路由的appName
    return (
        <>
            <MicroApp name={name} />
        </>
    );
};
export default MicroAppLayout;

然后在路由中，将所有的类似的path路由到这个组件进行处理

{
  path: '/community_apps/:appName/:communityFlag/:appFlag',
  component: './MicroAppLayout',
}

跨域处理

如果微服务入口是跨域的，需要做跨域处理，

这里主要是指对微服务配置允许跨域，即配置响应头

iis

搜索“iis 跨域配置”

nginx

搜索“nginx 跨域配置”