引导者

## qiankun 微服务### 简介qiankun 是一个基于 single-spa 的微前端实现方案，由蚂蚁金服开源。它旨在帮助开发者构建一个生产可用的微前端架构，并提供一系列功能来简化微前端应用的开发和部署。与其他微前端方案相比，qiankun 更加轻量级，易于上手，并且对现有项目的侵入性更小。### 主要特点

简单易用：

qiankun 提供了简洁的 API，开发者可以轻松地将现有的项目改造为微应用，并将其集成到主应用中。

技术栈无关：

qiankun 不依赖于任何特定的 JavaScript 框架或库，可以与 React、Vue、Angular 等主流框架无缝集成。

HTML Entry：

qiankun 支持使用 HTML 作为微应用的入口，这意味着开发者无需对现有项目进行大量的改造即可将其迁移到微前端架构中。

独立开发部署：

每个微应用可以独立开发、构建和部署，这有利于提高开发效率和代码的可维护性。

强大的生态系统：

qiankun 拥有活跃的社区和丰富的插件，可以满足各种不同的业务需求。### 核心概念

主应用 (Main Application):

负责加载、启动和管理各个微应用的应用程序。

微应用 (Micro Application):

独立开发、运行的子应用，可以拥有自己的路由、状态管理和构建工具。

生命周期钩子 (Lifecycle Hooks):

qiankun 为微应用提供了类似于单页应用的生命周期钩子函数，例如 bootstrap、mount 和 unmount，开发者可以在这些钩子函数中执行相应的逻辑。

沙箱隔离 (Sandbox Isolation):

qiankun 提供了两种沙箱隔离机制（LegacySandbox 和 ProxySandbox）来防止微应用之间的全局变量污染。

通信机制 (Communication Mechanism):

qiankun 提供了 Actions 通信机制和基于 props 的父子组件通信方式，方便主应用和微应用之间进行数据交互。### qiankun 实现微前端的步骤1.

创建主应用：

初始化一个新的项目，并将其作为主应用。 2.

创建微应用：

将现有的项目或创建一个新的项目作为微应用，并配置相应的 webpack 构建脚本。 3.

注册微应用：

在主应用中使用 `registerMicroApps` 方法注册所有的微应用，并指定每个微应用的名称、入口地址、激活规则等信息。 4.

启动 qiankun：

调用 `start` 方法启动 qiankun 框架，此时主应用会根据路由规则加载并运行相应的微应用。### 代码示例

主应用 (main.js)

```javascript import { registerMicroApps, start } from 'qiankun';registerMicroApps([{name: 'app1',entry: '//localhost:8081',container: '#container',activeRule: '/app1',},{name: 'app2',entry: '//localhost:8082',container: '#container',activeRule: '/app2',}, ]);start(); ```

微应用 (app1/src/index.js)

```javascript // ... your app code ...// 导出生命周期钩子函数 export async function bootstrap() {console.log('app1 bootstraped'); }export async function mount(props) {console.log('app1 mounted', props);// ... render your app ... }export async function unmount() {console.log('app1 unmounted');// ... unmount your app ... } ```### 总结qiankun 提供了一种简单、高效、低耦合的方式来构建微前端应用，它可以帮助开发者快速地将现有的项目迁移到微前端架构中，并享受微前端带来的各种优势。如果你正在寻找一种微前端解决方案，qiankun 绝对值得一试。### 学习资源

[qiankun 官方文档](https://qiankun.umijs.org/zh/)

[蚂蚁金服微前端解决方案 qiankun](https://zhuanlan.zhihu.com/p/91889685)This is a basic structure and content for an article about qiankun. You can add more specific details, examples, and comparisons with other micro-frontend frameworks to make it more comprehensive. Please note that this article assumes you have some basic knowledge of JavaScript, web development, and the concept of micro-frontends.

qiankun 微服务

简介qiankun 是一个基于 single-spa 的微前端实现方案，由蚂蚁金服开源。它旨在帮助开发者构建一个生产可用的微前端架构，并提供一系列功能来简化微前端应用的开发和部署。与其他微前端方案相比，qiankun 更加轻量级，易于上手，并且对现有项目的侵入性更小。

主要特点* **简单易用：** qiankun 提供了简洁的 API，开发者可以轻松地将现有的项目改造为微应用，并将其集成到主应用中。 * **技术栈无关：** qiankun 不依赖于任何特定的 JavaScript 框架或库，可以与 React、Vue、Angular 等主流框架无缝集成。 * **HTML Entry：** qiankun 支持使用 HTML 作为微应用的入口，这意味着开发者无需对现有项目进行大量的改造即可将其迁移到微前端架构中。 * **独立开发部署：** 每个微应用可以独立开发、构建和部署，这有利于提高开发效率和代码的可维护性。 * **强大的生态系统：** qiankun 拥有活跃的社区和丰富的插件，可以满足各种不同的业务需求。

核心概念* **主应用 (Main Application):** 负责加载、启动和管理各个微应用的应用程序。 * **微应用 (Micro Application):** 独立开发、运行的子应用，可以拥有自己的路由、状态管理和构建工具。 * **生命周期钩子 (Lifecycle Hooks):** qiankun 为微应用提供了类似于单页应用的生命周期钩子函数，例如 bootstrap、mount 和 unmount，开发者可以在这些钩子函数中执行相应的逻辑。 * **沙箱隔离 (Sandbox Isolation):** qiankun 提供了两种沙箱隔离机制（LegacySandbox 和 ProxySandbox）来防止微应用之间的全局变量污染。 * **通信机制 (Communication Mechanism):** qiankun 提供了 Actions 通信机制和基于 props 的父子组件通信方式，方便主应用和微应用之间进行数据交互。

qiankun 实现微前端的步骤1. **创建主应用：** 初始化一个新的项目，并将其作为主应用。 2. **创建微应用：** 将现有的项目或创建一个新的项目作为微应用，并配置相应的 webpack 构建脚本。 3. **注册微应用：** 在主应用中使用 `registerMicroApps` 方法注册所有的微应用，并指定每个微应用的名称、入口地址、激活规则等信息。 4. **启动 qiankun：** 调用 `start` 方法启动 qiankun 框架，此时主应用会根据路由规则加载并运行相应的微应用。

代码示例**主应用 (main.js)**```javascript import { registerMicroApps, start } from 'qiankun';registerMicroApps([{name: 'app1',entry: '//localhost:8081',container: '

container',activeRule: '/app1',},{name: 'app2',entry: '//localhost:8082',container: '

container',activeRule: '/app2',}, ]);start(); ```**微应用 (app1/src/index.js)**```javascript // ... your app code ...// 导出生命周期钩子函数 export async function bootstrap() {console.log('app1 bootstraped'); }export async function mount(props) {console.log('app1 mounted', props);// ... render your app ... }export async function unmount() {console.log('app1 unmounted');// ... unmount your app ... } ```

总结qiankun 提供了一种简单、高效、低耦合的方式来构建微前端应用，它可以帮助开发者快速地将现有的项目迁移到微前端架构中，并享受微前端带来的各种优势。如果你正在寻找一种微前端解决方案，qiankun 绝对值得一试。

学习资源* [qiankun 官方文档](https://qiankun.umijs.org/zh/) * [蚂蚁金服微前端解决方案 qiankun](https://zhuanlan.zhihu.com/p/91889685)This is a basic structure and content for an article about qiankun. You can add more specific details, examples, and comparisons with other micro-frontend frameworks to make it more comprehensive. Please note that this article assumes you have some basic knowledge of JavaScript, web development, and the concept of micro-frontends.