# 自动生成 Module Federation Exposes 配置

## 功能说明

这个插件会根据 Vue Router 的路由配置自动生成 Module Federation 的 `exposes` 配置。

### 主要特性

- ✅ 自动从路由配置中提取所有组件
- ✅ 支持嵌套路由（子路由会生成对应的路径）
- ✅ 保留路由的 meta 信息（可用于生成文档）
- ✅ 无需手动维护 exposes 配置

## 生成的规则

1. **顶层路由**：`/home` → `'./home': './src/views/HomeView.vue'`
2. **嵌套路由**：`/home/dashboard` → `'./home/dashboard': './src/views/DashboardView.vue'`
3. **路径规范**：自动去掉开头的 `/`，生成规范的模块路径

## 使用示例

### 1. 路由配置

```typescript
// src/router/routes.ts
export const routes: RouteRecordRaw[] = [
  {
    path: '/home',
    name: 'Home',
    component: () => import('../views/HomeView.vue'),
    meta: {
      title: '首页视图',
      description: '应用首页，展示主要内容和导航',
      category: 'Page',
      icon: 'home',
      tags: ['首页', '主页面'],
    },
    children: [
      {
        path: 'dashboard',
        name: 'Dashboard',
        component: () => import('../views/DashboardView.vue'),
        meta: {
          title: '仪表盘',
          description: '展示应用的主要数据和统计信息',
          category: 'Page',
          icon: 'dashboard',
          tags: ['仪表盘', '数据展示'],
        },
      },
    ],
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/AboutView.vue'),
    meta: {
      title: '顶部导航栏',
      description: '全局头部导航组件，包含Logo和菜单',
      category: 'Layout',
      icon: 'header',
      tags: ['导航', '布局'],
    },
  },
]
```

### 2. Rsbuild 配置

```typescript
// rsbuild.config.ts
import { routes } from './src/router/routes';
import { generateExposesFromRoutes } from './plugins/generateExposesPlugin';

export default defineConfig({
  plugins: [
    pluginModuleFederation({
      name: 'remote1',
      // 🚀 根据路由自动生成 exposes 配置
      exposes: generateExposesFromRoutes(routes).exposes,
      // ... 其他配置
    }),
  ],
});
```

### 3. 生成的配置

```typescript
exposes: {
  './home': './src/views/HomeView.vue',
  './home/dashboard': './src/views/DashboardView.vue',
  './about': './src/views/AboutView.vue',
}
```

## 测试生成的配置

运行测试脚本查看生成的配置：

```bash
npx tsx scripts/test-exposes.ts
```

输出示例：
```
📋 Detailed expose items:
┌─────────┬────────────────────┬─────────────────────────────────┬──────────────┐
│ (index) │ Expose Key         │ Component Path                  │ Title        │
├─────────┼────────────────────┼─────────────────────────────────┼──────────────┤
│ 0       │ './home'           │ './src/views/HomeView.vue'      │ '首页视图'   │
│ 1       │ './home/dashboard' │ './src/views/DashboardView.vue' │ '仪表盘'     │
│ 2       │ './about'          │ './src/views/AboutView.vue'     │ '顶部导航栏' │
└─────────┴────────────────────┴─────────────────────────────────┴──────────────┘
```

## 在其他应用中使用暴露的模块

### Host 应用配置

```typescript
// host 应用 rsbuild.config.ts
export default defineConfig({
  plugins: [
    pluginModuleFederation({
      name: 'host',
      remotes: {
        remote1: 'remote1@http://localhost:3000/mf-manifest.json',
      },
    }),
  ],
});
```

### 使用远程模块

```typescript
// 在 Vue 组件中使用
const HomeView = defineAsyncComponent(() =>
  import('remote1/home')
)

const DashboardView = defineAsyncComponent(() =>
  import('remote1/home/dashboard')
)
```

## 高级用法

### 获取详细的 expose 信息

```typescript
const { exposes, exposeItems } = generateExposesFromRoutes(routes);

// exposeItems 包含详细的 meta 信息
console.log(exposeItems);
/*
[
  {
    key: './home',
    value: './src/views/HomeView.vue',
    meta: {
      title: '首页视图',
      description: '应用首页，展示主要内容和导航',
      category: 'Page',
      icon: 'home',
      tags: ['首页', '主页面'],
    }
  },
  // ... more items
]
*/
```

### 生成模块文档

利用 `exposeItems` 中的 meta 信息，你可以自动生成模块使用文档。

## 注意事项

1. **路由配置分离**：路由配置必须放在单独的 `routes.ts` 文件中，以便在构建环境中也能使用
2. **组件路径**：确保组件使用动态导入 `() => import(...)`
3. **路径规范**：插件会自动处理相对路径，确保生成的路径正确

## 文件结构

```
project/
├── src/
│   └── router/
│       ├── routes.ts          # 路由配置（新增）
│       └── index.ts           # Router 实例
├── plugins/
│   └── generateExposesPlugin.ts  # 自动生成插件
├── scripts/
│   └── test-exposes.ts        # 测试脚本
└── rsbuild.config.ts          # Rsbuild 配置
```