私人申请建设网站多少钱,html如何建网站,网站粘度,广告联盟平台自动赚钱官网 #x1f4e6; 基于 single-spa 封装#xff0c;提供了更加开箱即用的 API。 #x1f4f1; 技术栈无关#xff0c;任意技术栈的应用均可 使用/接入#xff0c;不论是 React/Vue/Angular/JQuery 还是其他等框架。 #x1f4aa; HTML Entry 接入方式#xff0c;让你接…官网 基于 single-spa 封装提供了更加开箱即用的 API。 技术栈无关任意技术栈的应用均可 使用/接入不论是 React/Vue/Angular/JQuery 还是其他等框架。 HTML Entry 接入方式让你接入微应用像使用 iframe 一样简单。 样式隔离确保微应用之间样式互相不干扰。 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来实现的。下面是加载子应用的大致过程 注册子应用在主应用中通过调用qiankun提供的registerMicroApp方法来注册子应用。在注册时需要传入子应用的相关配置信息包括子应用的名称、入口路由、资源路径等。主应用在注册完子应用后就具备了加载和控制子应用的能力。 加载子应用当主应用在合适的时机如用户访问特定路由或用户交互触发需要加载子应用时可以调用start方法来启动已注册的子应用。这会触发主应用向子应用的静态资源路径发送一个加载请求。 动态加载资源子应用的打包文件通常会被部署到一个静态资源服务如CDN或主应用的静态文件目录下。当主应用启动子应用时会向这些资源路径发送加载请求以获取子应用的静态资源文件。 挂载子应用一旦主应用成功获取了子应用的静态资源文件就会在页面中动态创建一个容器通常是一个div元素并将子应用的资源文件加载到这个容器中。这样就完成了子应用在主应用中的加载和挂载过程。
通过qiankun的API和机制主应用能够动态地加载和卸载子应用实现了整个微前端应用的灵活组合和动态管理。这样的设计让微服务架构更加灵活和可维护使得不同团队开发的独立应用能够在一个完整的生态系统中协同工作。
在主应用中注册微应用
当微应用信息注册完之后一旦浏览器的 url 发生变化便会自动触发 qiankun 的匹配逻辑所有 activeRule 规则匹配上的微应用就会被插入到指定的 container 中同时依次调用微应用暴露出的生命周期钩子。
import { registerMicroApps, start } from qiankun;
registerMicroApps([{name: react app, // app name registeredentry: //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等。之后将打包生成的静态资源文件部署到服务器或静态文件托管服务中即可。
子应用的打包和部署稍有不同因为子应用需要能够在主应用中动态加载和执行。下面是子应用的打包和部署步骤 子应用独立开发子应用可以独立开发使用自己的构建工具如Webpack、Rollup、Vite等进行打包并生成静态资源文件。 导出子应用配置在子应用的打包过程中需要将其配置文件导出为一个特定的格式通常是JSON对象其中包含子应用的入口文件、打包后的静态资源文件路径等信息。这个配置文件将用于在主应用中引入子应用。 部署子应用资源将子应用打包生成的静态资源文件和配置文件部署到一个静态资源服务如CDN或主应用的静态文件目录下。 注册子应用在主应用中通过使用qiankun提供的API根据子应用的配置文件进行注册。主应用需要引入qiankun的相关库和函数并在合适的时机如应用初始化或路由切换使用registerMicroApp方法注册子应用。
通过以上步骤主应用和子应用就可以分别进行打包和部署。主应用通过静态资源文件在浏览器中加载和运行而子应用则在主应用运行时动态加载并执行。这使得主应用能够灵活地控制和切换子应用的展示实现整体的微前端架构。在部署时你需要确保主应用和子应用的网络路径配置正确以便能够正常加载和运行子应用。
