首页 > 其他分享 >微服务架构qiankun集成react子应用

微服务架构qiankun集成react子应用

时间:2024-06-13 16:34:14浏览次数:23  
标签:qiankun vue 架构 app react 应用 import config

前一篇文章讲了qiankun集成vue子应用,这篇随笔讲集成react子应用。

1、创建react子应用

用react脚手架初始化一个react项目,至于项目的数据仓库store和路由、以及UI组件库这里就不做讲解,可以自己自行网上找资料配置。

create-react-app  my-react-app

2、在src路径下创建publicPath.js文件,内容和上一篇的vue子应用一致,这里不再说了,不清楚请翻我上一篇随笔

3、下面是react项目的入口js的内容,针对这js做下讲解

import React, { Suspense } from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { HashRouter, BrowserRouter } from "react-router-dom";
import { Spin, ConfigProvider } from "antd";
import { store, persistor } from "./store";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import zhCN from "antd/locale/zh_CN";
import "./publicPath.js";

let mountNode = null;
let root = null;

function render(props) {
  const { container } = props;
  mountNode = container
    ? container.querySelector("#root")
    : document.querySelector("#root");
  root = ReactDOM.createRoot(mountNode);
  root.render(
    <ConfigProvider locale={zhCN}>
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <Suspense fallback={<Spin size="large" style={{ marginTop: 100 }} />}>
            <BrowserRouter
              basename={window.__POWERED_BY_QIANKUN__ ? "/app-react/" : "/"}
            >
              <App />
            </BrowserRouter>
          </Suspense>
        </PersistGate>
      </Provider>
    </ConfigProvider>
  );
}

if (!window.__POWERED_BY_QIANKUN__) {
  render({});
}

export async function bootstrap() {
  console.log("[react16] react app bootstraped");
}

export async function mount(props) {
  console.log("[react16] props from main framework", props);
  render(props);
}

export async function unmount(props) {
  root.unmount();
}
reportWebVitals();

这里绝大部分和vue一致,也是新增一个render函数,用于区分是从qiankun框架访问还是直接访问,里面的创建react实例根据react的版本可能稍有不同,我这边使用的是18.2.0,路由是react-router-dom的BrowserRouter,是

history模式,这里也要设置路由的base,这里和vue一致,然后下面暴露三个方法,也和上一篇的vue一致,只不过unmount方法用的是react的卸载,这个是react18.2.0的卸载方法,官网用的是unmountComponentAtNode,可能

这个方法目前已经废弃,如果你用的react是17版本以前的可以使用,如果是17之后的或者最新的就用我上面的这个。

3、最后是打包,修改webpack配置,这里使用的是官网推荐的@rescripts/cl,首先安装插件依赖

 

yarn add -D @rescripts/cli

 

然后在项目根目录下新增.rescriptsrc.js文件,文件内容如下

 

const { name } = require("./package");

module.exports = {
  webpack: (config) => {
    config.output.library = `${name}-[name]`;
    config.output.libraryTarget = "umd";
    // webpack 5 需要把 jsonpFunction 替换成 chunkLoadingGlobal
    config.output.chunkLoadingGlobal = `webpackJsonp_${name}`;
    config.output.globalObject = "window";

    return config;
  },

  devServer: (_) => {
    const config = _;

    config.headers = {
      "Access-Control-Allow-Origin": "*",
    };
    // config.historyApiFallback = true;
    // config.hot = false;
    // config.watchContentBase = false;
    // config.liveReload = false;

    return config;
  },
};

 

主要有个打包配置,这里注意一下jsonFunction和chunkLoadingGlobal的区别,webpack4使用jsonFunction,webpack5则用chunkLoadingGlobal,下面就是headers的配置,防止跨域csp的问题,这点和上一篇的vue里面是一样的。

 

到这里react子应用就配置好了,下面就是在主应用注册子应用,如下:

 

//注册微服务应用
registerMicroApps([
  {
    name: "vueApp",
    entry: "//localhost:8080",
    container: "#micro-app-container",
    activeRule: "/app-vue",
  },
  {
    name: "reactApp",
    entry: "//localhost:3000",
    container: "#micro-app-container",
    activeRule: "/app-react",
  },
]);

 

第一个是上一篇的vue子应用,下面的就是我们刚刚创建的子应用,到这里就完成了整个react子应用的集成。

下面是我在主应用的App.vue里面的代码片段,点击vue子应用跳转vue子应用,点击react子应用跳转react子应用。

<template>
  <div id="app">
    <div class="chunk-menu">
      <div
        class="chunk-menu-item"
        :class="[activeApp == 1 ? 'active-menu' : '']"
        @click="handleChange(1)"
      >
        vue子应用
      </div>
      <div
        class="chunk-menu-item"
        :class="[activeApp == 2 ? 'active-menu' : '']"
        @click="handleChange(2)"
      >
        react子应用
      </div>
    </div>
    <img alt="Vue logo" src="./assets/logo.png" />

    <div id="micro-app-container"></div>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      activeApp: "",
    };
  },
  methods: {
    handleChange(type) {
      this.activeApp = type;
      switch (type) {
        case 1: //vue
          this.$router.push("/app-vue/");
          break;
        case 2: //react
          this.$router.push("/app-react/");
          break;
      }
    },
  },
};
</script>

补:这里会有一个问题,假如点击同一个路由的话可能会报异常,这个是vue-router的bug,可以在主应用的router文件里解决,解决方案放在下面,主要是Vue.use(Router)下面的

import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);
const originalPush = Router.prototype.push;
// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch((err) => err);
};

 

标签:qiankun,vue,架构,app,react,应用,import,config
From: https://www.cnblogs.com/zhouyun-yx/p/18246190

相关文章

  • 什么是React的虚拟DOM?它如何工作以提高性能?
    React的虚拟DOM(VirtualDOM)是React框架中的一个核心概念,它是一个轻量级的JavaScript对象树,用于描述真实DOM的结构和属性。虚拟DOM的引入极大地提高了React应用程序的性能,其工作原理主要体现在以下几个方面:虚拟DOM的定义虚拟DOM是一个JavaScript对象,它是真实DOM的抽象表示......
  • 前端微服务架构qiankun初体验
    一、背景‘熵增’问题一直是所有软件开发中都会遇到的问题,不管是前端还是后端都会遇到,老的系统在需求不断变更或者迭代,代码量会越来越大,最终都会形成一座‘屎山’,今天主要讨论前端对于这种情况的解决方案。目前前端的解决方案有比较古老的iframe,但是iframe是完全隔绝了......
  • 直播预约丨《指标体系建设实战》第三期:指标平台功能架构及落地实践
    指标是反映企业的各项核心业务活动、管理成效的数据体系,指标体系作为联结业务逻辑与数据实体的关键桥梁,是构建高质量数据统计的基础单元,并在量化业务绩效和效果评估中扮演着核心角色。为了更好地服务于客户并提供切实可行的实践指导,自4月24日起,袋鼠云将推出全新《指标体系建设实......
  • 2024年大厂程序员进阶宝典,java系统安全架构设计
    第1章:Dubbo的简史、后续的规划和整体架构大图————Dubbo高性能RPC通信框架1.1应用架构演进过程1.2Dubbo简介1.3Dubbo总体大图第2章:Dubbo的环境配置和基于Dubbo开发第一款应用程序————开发第一款Dubbo应用程序2.1配置开发环境2.2基于XML配置实现2.3......
  • 在线CAD块表的二次开发(react浏览编辑CAD插件)
    前言在DWG数据库中,所有图块都存放在块表McDbBlockTable()中,块表中每一条记录称为图块记录对象McDbBlockTableRecord(),图块记录中存放着所有实体数据,用户可以通过改变图块的属性设置来修改其对应着的实体数据。块表操作1.获取当前控件的数据库块表我们可以通过调用mxcad中的......
  • java基于Vue+Spring boot前后端分离架构开发的一套UWB技术高精度定位系统源码
    java基于Vue+Springboot前后端分离架构开发的一套UWB技术高精度定位系统源码系统采用UWB高精度定位技术,可实现厘米级别定位。UWB作为一种高速率、低功耗、高容量的新兴无线局域定位技术,目前应用主要聚焦在室内外精确定位。在工业自动化、物流仓储、电力巡检、煤矿施工、自动......
  • 动态选择4种库存更新策略+缓存预热+多级存储结构——应对高并发秒杀情景和其他多种情
    商城整体功能架构图文字分析:活动入口进行风控检测,这个使用独立的服务来实现,风控使用批量提交的形式来实现,直接运用Java线程池来实现,可以提交一个列表来实现批量,可以参考以下的代码创建批量请求并且进行提交:importjava.util.ArrayList;importjava.util.List;publi......
  • Web大前端全栈架构学习之路
    Web大前端是一个非常庞大的知识体系结构,需要学习和掌握的知识非常多,技术更新的速度也非常快,一直想把我们整个大前端的知识技能做一个系统的学习总结,及时的查缺补漏以及学习新的技能。大厂一线全栈开发12年,从小白到全栈架构,如何系统的学习Web大前端全栈架构,从今天开始持续更......
  • Java项目:基于SSM框架实现的家居商城系统分前后台【ssm+B/S架构+源码+数据库+毕业论文
    一、项目简介本项目是一套基于SSM框架实现的家居商城系统包含:项目源码、数据库脚本等,该项目附带全部源码可作为毕设使用。项目都经过严格调试,eclipse或者idea确保可以运行!该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值二、技术实现......
  • 在 Wed 中应用 MyBatis(同时使用MVC架构模式,以及ThreadLocal 事务控制)
    1.在Wed中应用MyBatis(同时使用MVC架构模式,以及ThreadLocal事务控制)@目录1.在Wed中应用MyBatis(同时使用MVC架构模式,以及ThreadLocal事务控制)2.实现步骤:1.第一步:环境搭建2.第二步:前端页面index.html3.第三步:创建pojo包、service包、dao包、web包、utils包,exceptions......