@winner-fed/plugin-hui-micro-app

适配 WinJS 的微前端 HUI 子系统插件，用于构建基于 HUI 微应用架构的子应用。

功能特性

• 🚀 微前端支持：完整的微前端子应用生命周期管理
• 🔄 生命周期管理：支持 bootstrap、mount、unmount、update 等生命周期钩子
• 🎯 资源隔离：自动处理应用间的资源隔离和命名空间管理
• 🛣️ 路由管理：智能处理子应用的路由和 basename 配置
• 💾 应用缓存：提供应用实例缓存机制，提升性能
• ⚡ 开发支持：支持开发模式和生产模式，集成 MFSU 加速构建

安装

npm install @winner-fed/plugin-hui-micro-app
# 或
yarn add @winner-fed/plugin-hui-micro-app
# 或
pnpm add @winner-fed/plugin-hui-micro-app

快速开始

1. 配置插件

在 .winrc.ts 中配置插件：

import { defineConfig } from 'win';

export default defineConfig({
  presets: [require.resolve('@winner-fed/preset-vue2')],
  plugins: [require.resolve('@winner-fed/plugin-hui-micro-app')],
  microApp: {
    child: {
      // 子应用配置
    }
  }
});

2. 基本使用

插件会自动为您的应用添加微前端支持，无需额外配置即可作为子应用运行。

配置选项

microApp.child

| 参数 | 类型 | 默认值 | 描述 | | ------------------------------------ | ------------ | --------- | ----------------------------- | | enable | boolean | true | 是否启用微应用功能 | | devSourceMap | boolean | true | 开发模式下是否开启 sourcemap | | shouldNotModifyDefaultBase | boolean | false | 是否不修改默认的 base 路径 | | shouldNotModifyRuntimePublicPath | boolean | false | 是否不修改运行时的 publicPath | | shouldNotAddLibraryChunkName | boolean | auto | 是否不添加 library chunk 名称 | | bootstrap | function | - | 应用启动时的生命周期钩子 | | mount | function | - | 应用挂载时的生命周期钩子 | | unmount | function | - | 应用卸载时的生命周期钩子 | | update | function | - | 应用更新时的生命周期钩子 |

生命周期钩子配置

export default defineConfig({
  microApp: {
    child: {
      async bootstrap(props) {
        console.log('应用启动', props);
      },
      async mount(props) {
        console.log('应用挂载', props);
      },
      async unmount(props) {
        console.log('应用卸载', props);
      },
      async update(props) {
        console.log('应用更新', props);
      }
    }
  }
});

运行时配置

也可以在运行时进行配置：

// src/app.ts
export const microApp = {
  child: {
    async bootstrap(props) {
      // 应用启动逻辑
    },
    async mount(props) {
      // 应用挂载逻辑
    },
    async unmount(props) {
      // 应用卸载逻辑
    },
    async update(props) {
      // 应用更新逻辑
    }
  }
};

API 说明

生命周期钩子

bootstrap(props)

应用启动时调用，用于初始化应用资源。

参数：

• props: 主应用传递的参数

mount(props)

应用挂载时调用，用于渲染应用。

参数：

• props: 主应用传递的参数
  • container: 挂载容器
  • base: 路由基础路径
  • name: 应用名称

unmount(props)

应用卸载时调用，用于清理应用资源。

参数：

• props: 主应用传递的参数

update(props)

应用更新时调用，用于处理应用更新逻辑。

参数：

• props: 主应用传递的参数

工具函数

isHUIMicroApp()

检查当前应用是否在 HUI 微应用环境中运行。

import { isHUIMicroApp } from '@@/plugin-hui-micro-app-child';

if (isHUIMicroApp()) {
  console.log('当前运行在 HUI 微应用环境中');
}

注意事项

1. 路由模式：建议使用 browser 模式，插件会自动处理 basename
2. 资源路径：插件会自动处理 publicPath，通常无需手动配置
3. 应用命名：确保 package.json 中的 name 字段唯一
4. 依赖版本：需要 h_ui 版本 ^1.57.1 以上

示例项目

查看 examples/with-hui-micro-app 目录获取完整示例。

变更日志

详见 CHANGELOG.md

许可证

MIT License