@skyfox2000/microbase

微前端基础类型库 (@skyfox2000/microbase)

项目概述

这是一个专为微前端架构设计的基础类型库，提供了微前端应用间通信、数据类型定义、路由管理和模块加载等核心功能。该库是微前端生态系统的基础组件，为主应用和子应用之间的协作提供标准化的接口和数据结构。

核心特性

🔗 微前端通信

• 主子应用通信：提供标准化的主应用与子应用通信接口
• 数据传递：支持用户信息、应用配置、路由状态等数据在应用间传递
• 事件机制：支持应用间事件监听和触发
• 环境检测：自动检测当前运行环境（独立应用/微应用/基座应用）

📋 类型定义体系

• 应用信息类型：完整的应用元数据类型定义
• 用户信息类型：用户认证和权限相关类型
• 主机信息类型：环境配置和服务地址类型
• 设置信息类型：前端配置和偏好设置类型

🛠 工具函数集合

• 数据处理：参数组合、数据转换等工具函数
• 环境管理：环境变量统一管理和配置
• 路由加载：动态路由加载和管理
• 模块加载：支持动态模块加载和组件注册

安装使用

安装方式

npm install -S @skyfox2000/microbase

基本使用

import { 
  isMicroApp, 
  initMainAppData, 
  mainAppApis,
  AppInfo,
  UserInfo 
} from '@skyfox2000/microbase';

// 检测是否在微应用环境中运行
if (isMicroApp()) {
  // 初始化主应用数据
  initMainAppData();
  
  // 使用主应用提供的API
  if (mainAppApis.value?.getUserInfo) {
    const userInfo = mainAppApis.value.getUserInfo();
    console.log('当前用户:', userInfo);
  }
}

API 文档

环境检测函数

isMicroApp(): boolean

检测当前应用是否运行在微前端环境中

if (isMicroApp()) {
  console.log('运行在微前端环境');
}

isBaseMicroApp(): boolean

检测当前应用是否为微前端基座应用

if (isBaseMicroApp()) {
  console.log('当前是基座应用');
}

主应用通信

initMainAppData(): void

初始化主应用数据，建立与主应用的通信连接

// 在微应用启动时调用
initMainAppData();

mainAppApis: Ref<MainOpenApis | undefined>

主应用开放的API接口集合

// 获取用户信息
const userInfo = mainAppApis.value?.getUserInfo?.();

// 路由跳转
mainAppApis.value?.mainAppPush?.('/target-path');

// 用户登录
await mainAppApis.value?.userLogin?.(loginInfo);

mainAppEvents: Ref<MainOpenEvents | undefined>

主应用开放的事件监听接口

// 监听设置变更事件
mainAppEvents.value?.onSettingChanged?.();

环境配置

EnvConfig: { [key: string]: string }

统一的环境变量配置对象

initEnv(metaEnv: ImportMetaEnv): void

初始化环境变量配置

import { initEnv } from '@skyfox2000/microbase';

// 在应用启动时初始化环境变量
initEnv(import.meta.env);

数据处理工具

combineParams(params: any): any

参数组合和处理工具函数

import { combineParams } from '@skyfox2000/microbase';

const combinedParams = combineParams({
  param1: 'value1',
  param2: 'value2'
});

路由管理

LoaderRouter

动态路由加载器，支持路由的动态注册和管理

import { LoaderRouter } from '@skyfox2000/microbase';

// 使用路由加载器
const router = new LoaderRouter(routeConfig);

模块加载

模块加载器函数

import { 
  loadModule, 
  initModuleLoader,
  moduleAttrs,
  moduleUrl,
  moduleRecords,
  moduleCom 
} from '@skyfox2000/microbase';

// 初始化模块加载器
initModuleLoader();

// 动态加载模块
await loadModule('module-name');

类型定义

AppInfo - 应用信息

interface AppInfo {
  readonly Id: string;           // 应用唯一标识
  readonly Name: string;         // 应用名称
  readonly AppCode: string;      // 应用编码（路由前缀）
  readonly Version: string;      // 版本号
  readonly Icon: string;         // 应用图标
  readonly Source: AppSource;    // 应用来源
  readonly Action: AppAction;    // 应用动作类型
  readonly Host: string;         // 应用加载地址
  readonly Enabled: boolean | number; // 启用状态
  Page?: string;                 // 默认页面
  Default?: boolean;             // 是否默认应用
  Description?: string;          // 应用描述
}

UserInfo - 用户信息

interface UserInfo {
  readonly Id: string;           // 用户ID
  readonly Name: string;         // 用户名称
  readonly Code: string;         // 用户编码
  readonly TenantId: string | null; // 租户ID
  readonly UserLevel: string;    // 用户级别
  readonly Roles?: string[];     // 角色列表
  readonly Permissions?: string[]; // 权限列表
}

LoginInfo - 登录信息

interface LoginInfo {
  UserName: string;              // 用户名
  UserPass: string;              // 密码
  UserInfo?: UserInfo;           // 用户信息
  readonly token?: string;       // 访问令牌
  readonly refreshToken?: string; // 刷新令牌
}

MainOpenApis - 主应用开放接口

interface MainOpenApis {
  getHostInfo: () => HostInfo;                    // 获取主机信息
  getAppInfo?: () => AppInfo;                     // 获取应用信息
  userRegister?: () => void;                      // 用户注册
  userLogin?: (loginInfo: LoginInfo) => Promise<ApiResponse<LoginInfo> | void>; // 用户登录
  userLogout?: () => Promise<ApiResponse<any> | void>; // 用户登出
  getToken?: () => string;                        // 获取授权令牌
  getUserInfo?: () => UserInfo;                   // 获取用户信息
  getSettingInfo?: () => SettingInfo;             // 获取设置信息
  mainAppPush?: (subPath: string) => void;        // 路由跳转
}

枚举类型

AppSource - 应用来源

enum AppSource {
  Market = "Market",    // 从市场安装
  Manual = "Manual"     // 手动输入
}

AppAction - 应用动作

enum AppAction {
  App = "App",           // 应用模式加载
  MenuApp = "MenuApp",   // 托管应用模式加载
  Link = "Link",         // 链接方式打开
  Iframe = "Iframe"      // Iframe内嵌方式打开
}

依赖要求

对等依赖 (Peer Dependencies)

• Vue: ^3.5.13 - Vue 3 框架
• Vue Router: ^4.5.0 - Vue 路由管理
• @skyfox2000/fapi: ^1.1.19 - API请求库
• @micro-zoe/micro-app: ^1.0.0-rc.18 - 微前端框架

构建配置

该库使用 Vite 进行构建，支持：

• TypeScript: 完整的类型支持
• ES Module: 现代化的模块格式
• 类型声明: 自动生成 .d.ts 文件
• 外部化依赖: 避免重复打包核心依赖

使用场景

1. 微前端主应用

// 在主应用中提供API给子应用
const mainApis: MainOpenApis = {
  getHostInfo: () => hostInfo,
  getUserInfo: () => currentUser,
  mainAppPush: (path) => router.push(path)
};

// 传递给子应用
microApp.setData('child-app', { MainApis: mainApis });

2. 微前端子应用

// 在子应用中接收主应用数据
if (isMicroApp()) {
  initMainAppData();
  
  // 使用主应用提供的功能
  const userInfo = mainAppApis.value?.getUserInfo?.();
  if (userInfo) {
    // 处理用户信息
  }
}

3. 独立应用

// 在独立应用中也可以使用类型定义
import type { AppInfo, UserInfo } from '@skyfox2000/microbase';

const appConfig: AppInfo = {
  Id: 'app-001',
  Name: '我的应用',
  AppCode: 'my-app',
  // ... 其他配置
};

版本历史

• v1.2.1: 当前版本，完善的微前端通信和类型定义
• v1.1.x: 增加模块加载功能
• v1.0.x: 初始版本，基础类型定义

注意事项

• 依赖管理: 确保项目中已安装所有对等依赖
• 环境检测: 在使用微前端功能前，先进行环境检测
• 类型安全: 充分利用 TypeScript 类型检查，避免运行时错误
• 版本兼容: 注意与其他 @skyfox2000 系列库的版本兼容性

技术支持

• 仓库地址: GitHub - @skyfox2000/microbase
• 问题反馈: 通过 GitHub Issues 提交问题
• 文档更新: 随版本更新同步维护

该库是微前端生态系统的核心基础库，为构建大型企业级微前端应用提供坚实的技术基础。