Qiankun 微前端框架快速入门教程

Qiankun 微前端框架快速入门教程

qiankun 📦 🚀 Blazing fast, simple and complete solution for micro frontends. 项目地址: https://gitcode.com/gh_mirrors/qi/qiankun

Qiankun 是一个基于微前端概念的解决方案，旨在帮助开发者构建下一代企业级Web应用程序。本教程将指导您了解项目的基本结构、关键的启动文件以及配置文件的相关信息，以快速上手Qiankun。

1. 项目目录结构及介绍

Qiankun 的仓库从GitHub克隆下来后，其基本目录结构大致如下：

qiankun/
├── examples             # 示例应用，包括Shell应用和多个挂载的Micro Frontend应用
│   ├── ...
├── .editorconfig        # 编辑器配置文件
├── .eslintignore        # ESLint忽略检查的文件列表
├── .eslintrc.js         # ESLint规则配置
├── .fatherrc.js         # Father构建工具的配置文件
├── .gitignore           # Git忽略文件列表
├── .prettierrc.js       # Prettier代码格式化配置
├── umirc.ts              # Umi配置文件，Qiankun可以与Umi集成
├── CONTRIBUTING.md      # 贡献指南
├── LICENSE               # 许可证文件，采用MIT许可协议
├── package.json          # Node.js项目配置文件，包含了依赖管理和脚本命令
├── README.md             # 项目读我文件，包含项目简介和快速入门信息
└── tsconfig.json         # TypeScript编译器配置

• examples 目录是学习和理解Qiankun如何工作的重要部分，其中提供了示例应用的实现。
• .editorconfig, .eslintignore, .eslintrc.js, 等文件用于保证代码风格一致性和质量控制。
• umirc.ts 和其他配置文件则关注于项目的具体配置需求。

2. 项目的启动文件介绍

在Qiankun项目中，并没有单一定义的“启动文件”如传统意义上的index.js或app.js，但主要的运行入口通常在示例应用内定义。例如，在examples目录下的某个子目录，可能会有一个或多个微前端应用的入口，或是在主壳（Shell）应用中通过Qiankun提供的API来加载子应用。对于开发模式下启动整个示例环境，常见的启动命令可能在根目录下的package.json中的scripts部分定义，如：

"scripts": {
    "start": "umi dev", 或者 "yarn examples:start"
}

这里的启动命令通常是利用Umi的开发服务器来启动示例应用。

3. 项目的配置文件介绍

umirc.ts

• 重点配置文件：umirc.ts（或.umirc.js），在进行Qiankun相关的微前端配置时尤其重要，特别是当你把Qiankun集成到Umi项目中时。这个文件可以用来设置应用的基础路径、代理、插件等配置，对于Qiankun来说，可能是定义微应用注册逻辑的地方之一。

qiankun的配置

虽然直接在umirc.ts中配置Qiankun不是强制性的，但在你的主应用中会有一些特定的Qiankun配置，这些配置通常散布在你的主体应用的入口文件或专为微前端管理准备的配置文件中。典型的配置涉及到了解和使用Qiankun提供的API，如registerMicroApps, start, 这些API通常用于指定微前端应用的信息（如名称、入口、容器选择器等）以及启动微前端架构。

例如：

import { registerMicroApps, start } from 'qiankun';

const apps = [
  // 注册微应用的示例
  {
    name: 'app1',
    entry: '//localhost:8081', // 微应用的入口URL
    container: '#sub-app-1', // 指定宿主机内的DOM元素作为微应用的容器
    activeRule: '/app1', // 控制微应用激活的路由规则
  },
];

registerMicroApps(apps);
start();

记住，具体的配置细节依据你的实际应用场景而变化，务必参考最新的Qiankun文档来获取最新和详细的配置选项和最佳实践。

qiankun 📦 🚀 Blazing fast, simple and complete solution for micro frontends. 项目地址: https://gitcode.com/gh_mirrors/qi/qiankun