qiankun微服务

官网

📦 基于 single-spa 封装，提供了更加开箱即用的 API。
📱 技术栈无关，任意技术栈的应用均可 使用/接入，不论是 React/Vue/Angular/JQuery 还是其他等框架。
💪 HTML Entry 接入方式，让你接入微应用像使用 iframe 一样简单。
🛡​ 样式隔离，确保微应用之间样式互相不干扰。
🧳 JS 沙箱，确保微应用之间 全局变量/事件 不冲突。
⚡️ 资源预加载，在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度。

样式隔离和js沙箱

qiankun是一个用于构建微前端架构的开源框架，它能够实现主应用和子应用之间的对接、路由匹配以及数据共享。下面详细介绍qiankun微服务的原理及实现方式：

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

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

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

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

全局状态管理：qiankun支持集成其他全局状态管理库（如Redux或Vuex），子应用可以通过全局状态管理库来共享和管理数据。在主应用中初始化全局状态管理库，通过插件或其他方式将全局状态传递给子应用，子应用就可以访问和修改全局状态了。

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

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

qiankun微服务的子应用打包会有index.html文件吗？这和主应用的index.html有什么关系

在qiankun微服务中，子应用的打包通常不包含index.html文件，这是因为子应用的入口是通过主应用动态加载的，而不是直接在浏览器中独立打开。

主应用的index.html文件是整个微前端应用的入口文件，它通常包含了整个应用的框架、样式和主要的配置信息。主应用的index.html文件会通过静态资源服务或服务器部署，在用户访问时被加载和呈现。

子应用的打包生成的文件通常是一系列的静态资源文件，例如JS、CSS、图片等。这些静态资源文件会包含子应用的业务逻辑和界面组件。子应用在主应用中被加载时，主应用会动态插入一个容器（如div元素）来承载子应用的内容，并在这个容器中加载子应用的静态资源文件。

所以，主应用的index.html文件和子应用的打包文件是独立存在的，它们在整个微前端应用中承担不同的角色。主应用的index.html负责整个应用的框架和配置，而子应用的打包文件负责子应用的具体业务逻辑和界面。通过这样的组合，qiankun实现了将多个独立的前端应用组合成一个整体的微前端架构。

为了让主应用能正确识别微应用暴露出来的一些信息，微应用的打包工具需要增加如下配置：

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

按照上面这个配置文件打包后，主应用注册子应用是如何加载该文件的？？

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

当主应用注册子应用时，在加载子应用的打包文件时，可以指定这个UMD模块的全局变量名作为子应用的名称。这样，主应用就能正确识别子应用暴露出来的信息。

以下是示例代码，展示了主应用如何加载使用了上述打包配置的子应用：

import { registerMicroApps, start } from 'qiankun';

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

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

// 启动主应用
start();

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

通过这种方式，主应用能够正确识别子应用打包后的文件，并与子应用进行交互。你可以根据实际情况，将以上示例代码中的子应用名称和其他配置信息替换为你自己的内容。

qiankun微服务主应用是如何加载子应用打包后的文件的

在qiankun微服务中，主应用加载子应用的打包文件是通过qiankun提供的注册子应用的API来实现的。下面是加载子应用的大致过程：

1. 注册子应用：在主应用中，通过调用qiankun提供的registerMicroApp方法来注册子应用。在注册时，需要传入子应用的相关配置信息，包括子应用的名称、入口路由、资源路径等。主应用在注册完子应用后，就具备了加载和控制子应用的能力。

2. 加载子应用：当主应用在合适的时机（如用户访问特定路由或用户交互触发）需要加载子应用时，可以调用start方法来启动已注册的子应用。这会触发主应用向子应用的静态资源路径发送一个加载请求。

3. 动态加载资源：子应用的打包文件通常会被部署到一个静态资源服务（如CDN）或主应用的静态文件目录下。当主应用启动子应用时，会向这些资源路径发送加载请求，以获取子应用的静态资源文件。

4. 挂载子应用：一旦主应用成功获取了子应用的静态资源文件，就会在页面中动态创建一个容器（通常是一个div元素），并将子应用的资源文件加载到这个容器中。这样就完成了子应用在主应用中的加载和挂载过程。

通过qiankun的API和机制，主应用能够动态地加载和卸载子应用，实现了整个微前端应用的灵活组合和动态管理。这样的设计让微服务架构更加灵活和可维护，使得不同团队开发的独立应用能够在一个完整的生态系统中协同工作。

在主应用中注册微应用：

当微应用信息注册完之后，一旦浏览器的 url 发生变化，便会自动触发 qiankun 的匹配逻辑，所有 activeRule 规则匹配上的微应用就会被插入到指定的 container 中，同时依次调用微应用暴露出的生命周期钩子。

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();

qiankun主应用和子应用是如何打包部署的

在使用qiankun构建微前端应用时，主应用和子应用可以分别进行打包和部署。

主应用的打包和部署与传统的前端应用类似。你可以使用常见的构建工具（如Webpack、Rollup、Vite等）对主应用进行打包，生成静态资源文件（例如HTML、JS、CSS等）。之后，将打包生成的静态资源文件部署到服务器或静态文件托管服务中即可。

子应用的打包和部署稍有不同，因为子应用需要能够在主应用中动态加载和执行。下面是子应用的打包和部署步骤：

1. 子应用独立开发：子应用可以独立开发，使用自己的构建工具（如Webpack、Rollup、Vite等）进行打包，并生成静态资源文件。

2. 导出子应用配置：在子应用的打包过程中，需要将其配置文件导出为一个特定的格式（通常是JSON对象），其中包含子应用的入口文件、打包后的静态资源文件路径等信息。这个配置文件将用于在主应用中引入子应用。

3. 部署子应用资源：将子应用打包生成的静态资源文件和配置文件部署到一个静态资源服务（如CDN）或主应用的静态文件目录下。

4. 注册子应用：在主应用中，通过使用qiankun提供的API，根据子应用的配置文件进行注册。主应用需要引入qiankun的相关库和函数，并在合适的时机（如应用初始化或路由切换）使用registerMicroApp方法注册子应用。

通过以上步骤，主应用和子应用就可以分别进行打包和部署。主应用通过静态资源文件在浏览器中加载和运行，而子应用则在主应用运行时动态加载并执行。这使得主应用能够灵活地控制和切换子应用的展示，实现整体的微前端架构。在部署时，你需要确保主应用和子应用的网络路径配置正确，以便能够正常加载和运行子应用。

代码007普通

打赏 收藏 海报 链接