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 xMicro from 'micro-frontend-framework';

// 注册子应用
xMicro.registerApps([
  {
    name: 'app1',
    entry: 'http://localhost:8081',  // 推荐使用完整URL
    activeRule: '/app1',
    container: '#subapp'
  },
  {
    name: 'app2',
    entry: 'http://localhost:8082',  // 推荐使用完整URL
    activeRule: '/app2',
    container: '#subapp'
  }
]);

// 启动
xMicro.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文档

xMicro.registerApps(apps)

注册子应用配置。

xMicro.start()

启动微前端框架。

xMicro.loadApp(name)

手动加载指定应用。

xMicro.unloadApp(name)

手动卸载指定应用。

xMicro.getState()

获取全局状态。

xMicro.setState(key, value)

设置全局状态。

⚠️ 重要注意事项

CORS配置

子应用服务器必须配置CORS，允许跨域访问：

# 使用http-server时必须添加--cors参数
npx http-server -p 8081 --cors
npx http-server -p 8082 --cors

Entry配置

推荐使用完整的HTTP协议地址：

// ✅ 推荐
entry: 'http://localhost:8081'

// ⚠️ 可能有问题（已修复）
entry: '//localhost:8081'

调试

如果遇到问题，请查看调试指南

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

# 测试
npm test

📚 文档

License

MIT