Package Exports

@jserxiao/xmicro
@jserxiao/xmicro/dist/index.esm.js
@jserxiao/xmicro/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@jserxiao/xmicro) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Micro Frontend Framework

一个轻量级的微前端框架，支持多框架集成、沙箱隔离、资源预加载等特性。

特性

🚀 轻量级 - 核心代码gzip后仅XX KB
🔒 沙箱隔离 - JS沙箱和CSS样式隔离
📦 HTML Entry - 支持HTML Entry方式加载子应用
🔄 生命周期管理 - 完整的应用生命周期钩子
📡 通信机制 - 全局状态管理和事件总线
⚡ 预加载 - 智能预加载策略优化性能
🎯 TypeScript支持 - 完整的类型定义

快速开始

安装

npm install micro-frontend-framework

主应用配置

import MicroFrontend from 'micro-frontend-framework';

// 注册子应用
MicroFrontend.registerApps([
  {
    name: 'app1',
    entry: '//localhost:8081',
    activeRule: '/app1',
    container: '#subapp'
  },
  {
    name: 'app2',
    entry: '//localhost:8082',
    activeRule: '/app2',
    container: '#subapp'
  }
]);

// 启动
MicroFrontend.start();

子应用配置

// 子应用需要导出生命周期钩子
export async function bootstrap() {
  console.log('app1 bootstrap');
}

export async function mount(props) {
  console.log('app1 mount', props);
  ReactDOM.render(<App />, document.getElementById('app'));
}

export async function unmount() {
  console.log('app1 unmount');
  ReactDOM.unmountComponentAtNode(document.getElementById('app'));
}

API文档

MicroFrontend.registerApps(apps)

注册子应用配置。

MicroFrontend.start()

启动微前端框架。

MicroFrontend.loadApp(name)

手动加载指定应用。

MicroFrontend.unloadApp(name)

手动卸载指定应用。

MicroFrontend.getState()

获取全局状态。

MicroFrontend.setState(key, value)

设置全局状态。

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

# 测试
npm test

License

MIT