jiangxiGaizao/plugins

自动生成 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. 路由配置

// 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 配置

// 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. 生成的配置

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

测试生成的配置

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

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 应用配置

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

使用远程模块

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

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

高级用法

获取详细的 expose 信息

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 配置