微前端框架的实战demo

以下是基于主流微前端框架的实战 Demo 开发指南，综合多个开源项目与实践案例整理而成：

一、qiankun 框架实战

1. 核心架构

主应用：负责路由分发、子应用注册与生命周期管理
子应用：独立开发部署，支持不同技术栈（Vue/React/Angular）

2. 快速搭建步骤

主应用配置（Vue 示例）：

javascript 复制代码

// main.js
import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
  {
    name: 'vue-sub',
    entry: '//localhost:7100', // 子应用入口
    container: '#subapp-container', 
    activeRule: '/vue',
    props: { token: '主应用传递的数据' } // 父子通信参数
  }
]);
start({ prefetch: 'all' });

子应用改造：

入口文件 需暴露生命周期钩子：

javascript 复制代码

export async function bootstrap() { /* 初始化 */ }
export async function mount(props) { 
  // 挂载逻辑，props 接收主应用参数
  render(props.container || document.getElementById('app'));
}
export async function unmount() { /* 卸载逻辑 */ }

Webpack 配置 ：

javascript 复制代码

// vue.config.js
module.exports = {
  devServer: { headers: { 'Access-Control-Allow-Origin': '*' } },
  configureWebpack: { output: { library: 'vueSub', libraryTarget: 'umd' } }
};

3. 通信机制

主应用 初始化全局状态：

javascript 复制代码

import { initGlobalState } from 'qiankun';
const actions = initGlobalState({ user: 'admin' });
actions.onGlobalStateChange((state, prev) => { /* 监听变化 */ });

子应用 通过 props 获取并更新状态：

javascript 复制代码

props.onGlobalStateChange((state) => { /* 子应用监听 */ });
props.setGlobalState({ ...state, newData: 'value' });

二、micro-app 框架实战

1. 多技术栈集成

支持框架：Angular、Next.js、Nuxt.js、React、Vue3（Vite）

项目结构 ：

plaintext 复制代码

micro-app-demo/
├── main-app/        # 主应用（React）
├── child-apps/
│   ├── angular11/  # Angular 子应用
│   └── vite-vue3/  # Vite + Vue3 子应用

2. 动态加载子应用

html 复制代码

<!-- 主应用通过 Web Component 标签加载 -->
<micro-app 
  name="vue3-app" 
  url="http://localhost:3001"
  baseroute="/vue3"
></micro-app>

3. 样式隔离

默认启用 Shadow DOM 隔离 CSS
通过 disableScopecss 属性关闭隔离

三、自研微前端框架进阶

1. 核心功能实现

沙箱隔离 ：通过 Proxy 代理 window 对象

javascript 复制代码

class Sandbox {
  constructor() { this.proxy = new Proxy(window, { /* 拦截操作 */ }); }
}

路由拦截 ：重写 history.pushState 和 popstate 事件

javascript 复制代码

window.history.pushState = patchedPushState;
window.addEventListener('popstate', handleRouteChange);

2. 多子应用并行加载

javascript 复制代码

// 同时加载 React15 和 Vue2 子应用
loadApp({ name: 'react15', entry: '//localhost:9002' });
loadApp({ name: 'vue2', entry: '//localhost:9004' });

3. 性能优化

预加载：提前加载子应用静态资源
缓存策略：对已加载子应用保留 DOM 和 JS 上下文

四、常见问题解决方案

路由冲突
- Hash 模式 ：主应用与子应用统一使用 #/subapp/ 前缀
- History 模式 ：通过 base 参数设置子应用路由基准路径
CSS 污染
- 使用 postcss 插件添加命名空间（如 postcss-prefix-selector）
- 动态卸载子应用样式表
资源加载失败
- 确保子应用配置 publicPath 动态注入
javascript 复制代码
```
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
```

五、完整 Demo 推荐

qiankun 官方示例
- 包含 Vue + React 子应用集成
- 源码：https://github.com/umijs/qiankun-example
micro-app 多框架 Demo
- 支持 Angular、Next.js、Nuxt.js 等
- 项目地址：https://github.com/micro-zoe/micro-app-demo
阿里云实践案例
- 实现沙箱隔离、全局状态管理
- 代码仓库：https://code.alibaba-inc.com/microFE-demo

通过以上案例，开发者可快速掌握微前端核心场景的实现方法。建议从 qiankun 或 micro-app 的官方示例入手，逐步深入定制化需求。