qiankun微服务_代码007(未授权)

本文介绍: 同时，通过适当的数据共享机制，使得主应用和子应用之间可以共享数据，并实现整个系统的协同工作。在主应用中初始化全局状态管理库，通过插件或其他方式将全局状态传递给子应用，子应用就可以访问和修改全局状态了。是一个用于实现微前端架构的框架，通过自定义浏览器内核、路由管理和数据共享等机制，实现了主应用和子应用之间的协作和对接，使得多个独立的前端应用能够协同工作和共享资源，从而提供一种灵活、可扩展的前端架构设计。：主应用通过props的方式将数据传递给子应用，并在子应用中通过props接收和使用这些数据。

官网

样式隔离和js沙箱

对接主应用和子应用：qiankun通过自定义浏览器内核，将子应用嵌入到主应用中。在主应用中，通过创建一个容器（HTML元素）来承载子应用的内容，同时在容器中为子应用提供一个通信机制（Web组件：基于Custom Elements）。通过这种方式，主应用和子应用可以共同组成一个完整的前端应用，并通过通信机制进行交互。

路由匹配：qiankun使用了浏览器的前端路由（History API）来实现主应用和子应用之间的路由切换。主应用负责控制整个页面的路由，根据路由规则将请求分发到对应的子应用中。当路由匹配成功后，qiankun会将路由信息传递给子应用，子应用根据收到的路由信息进行展示。

数据共享：qiankun提供了两种方式来实现主应用和子应用之间的数据共享。

props共享：主应用通过props的方式将数据传递给子应用，并在子应用中通过props接收和使用这些数据。这种方式适用于简单的数据共享场景。

qiankun通过封装和提供一系列工具、API和通信机制，实现了主应用和子应用的互相对接和协作。它允许你将多个独立的前端应用组合成一个整体，并能够充分利用浏览器的前端路由和现代浏览器的能力来实现子应用的动态加载和切换。同时，通过适当的数据共享机制，使得主应用和子应用之间可以共享数据，并实现整个系统的协同工作。

总的来说，qiankun是一个用于实现微前端架构的框架，通过自定义浏览器内核、路由管理和数据共享等机制，实现了主应用和子应用之间的协作和对接，使得多个独立的前端应用能够协同工作和共享资源，从而提供一种灵活、可扩展的前端架构设计。

const packageName = require('./package.json').name;
module.exports = {
  output: {
    library: `${packageName}-[name]`,
    libraryTarget: 'umd',
    chunkLoadingGlobal: `webpackJsonp_${packageName}`,
  },
};

按照你提供的配置文件，子应用的打包工具将会生成一个UMD模块，并将子应用的代码注入到这个模块中。在这个UMD模块中，子应用的导出内容会被设置为全局变量，并通过前缀 ${packageName}-[name] 来访问。

import { registerMicroApps, start } from 'qiankun';

// 定义子应用的配置信息
const apps = [
  {
    name: 'subapp1', // 子应用的名称
    entry: '//localhost:7100', // 子应用的入口URL，可以是服务器的地址和端口
    container: '#subapp-container', // 子应用的挂载点
    activeRule: '/subapp1', // 主应用的路由规则，用来匹配子应用的激活条件
  },
  // 可以继续定义其他子应用的配置信息
];

// 注册子应用
registerMicroApps(apps);

// 启动主应用
start();

在上述代码中，我们将子应用的名称设置为 subapp1，这个名称应该与子应用打包配置中设置的 ${packageName}-[name] 相匹配。主应用会根据注册的配置信息和子应用的名称，自动加载子应用的打包文件，并将其挂载到指定的容器中。

import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
  {
    name: 'react app', // app name registered
    entry: '//localhost:7100',
    container: '#yourContainer',
    activeRule: '/yourActiveRule',
  },
  {
    name: 'vue app',
    entry: { scripts: ['//localhost:7100/main.js'] },
    container: '#yourContainer2',
    activeRule: '/yourActiveRule2',
  },
]);
start();