@anthropic/vite-plugin-micro-frontend

Vite 微前端插件集合，包含路由自动生成、模块联邦、qiankun 集成等功能。

安装

pnpm add @lemon-fe/vite-plugin-micro-frontend

功能特性

• 🚀 HTML 转换 - 移除开发环境下的 React Refresh 脚本，避免微前端冲突
• 📁 路由自动生成 - 根据 pages 目录自动生成 UMI 风格的路由配置
• 🔗 模块联邦 - 自动生成 mf.tsx 模块联邦工具文件
• 🎯 qiankun 集成 - 开箱即用的 qiankun 微前端支持
• ⚡ Federation - 集成 @originjs/vite-plugin-federation

使用方式

完整使用（推荐）

// vite.config.ts
import { defineConfig } from "vite";
import {
  microFrontendPlugins,
  createMfAlias,
  defaultRemotes,
} from "@anthropic/vite-plugin-micro-frontend";
import * as path from "path";

export default defineConfig({
  plugins: [
    ...microFrontendPlugins({
      appName: "wms",
      useDevMode: process.env.NODE_ENV === "development",
      federation: {
        name: "wms",
        filename: "remote.js",
        exposes: {
          "./ProcessingInboundDetail":
            "./src/exposes/processing-inbound-detail/index.tsx",
        },
        remotes: defaultRemotes, // 或自定义远程模块配置
      },
      routes: {
        pagesDir: "src/pages",
        outputPath: "src/routes.ts",
      },
      qiankun: {
        enabled: true,
        name: "wms",
      },
    }),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
      ...createMfAlias(),
    },
  },
});

按需使用单独插件

import {
  htmlRemoveFreshPlugin,
  pagesRoutesPlugin,
  mfGeneratorPlugin,
} from "@anthropic/vite-plugin-micro-frontend";

export default defineConfig({
  plugins: [
    htmlRemoveFreshPlugin(),
    pagesRoutesPlugin({
      pagesDir: "src/pages",
      routeTemplate: {
        defaultLoadingComponentPath: "@/components/loading",
        intlPath: "@/utils/intl",
        pageAliasPrefix: "@/pages",
      },
    }),
    mfGeneratorPlugin({
      remotes: {
        ama: {
          aliasName: "ama",
          remoteName: "ama",
          entry: "/app-ama/remote.js",
        },
      },
    }),
  ],
});

配置选项

MicroFrontendPluginOptions

| 选项 | 类型 | 默认值 | 说明 | | --------------- | ------------------------------ | ---------------------------------------- | ------------------------------- | | appName | string | - | 应用名称（必填） | | useDevMode | boolean | process.env.NODE_ENV === 'development' | 是否为开发模式 | | federation | FederationConfig | - | 模块联邦配置 | | routes | RoutesPluginOptions \| false | {} | 路由插件选项，设为 false 禁用 | | mfGenerator | MfGeneratorOptions \| false | - | mf 生成器选项 | | htmlTransform | boolean | true | 是否启用 HTML 转换 | | qiankun | object | - | qiankun 配置 |

FederationConfig

| 选项 | 类型 | 默认值 | 说明 | | ---------- | ------------------------------ | ------------- | ---------------- | | name | string | - | 应用名称（必填） | | filename | string | 'remote.js' | 远程入口文件名 | | exposes | Record<string, string> | {} | 暴露的模块 | | remotes | Record<string, RemoteConfig> | - | 远程模块配置 |

RoutesPluginOptions

| 选项 | 类型 | 默认值 | 说明 | | --------------- | ----------------------- | --------------------------------------------- | ------------------ | | pagesDir | string | 'src/pages' | pages 目录路径 | | outputPath | string | 'src/routes.ts' | 生成的路由文件路径 | | watch | boolean | true | 是否启用文件监听 | | ignoreDirs | string[] | ['components', 'utils', 'hooks', 'typings'] | 忽略的目录 | | routeTemplate | RoutesTemplateOptions | - | 自定义路由文件模板 |

RoutesTemplateOptions

| 选项 | 类型 | 默认值 | 说明 | | ----------------------------- | -------- | ------------------------ | -------------- | | defaultLoadingComponentPath | string | '@/components/loading' | 加载组件路径 | | intlPath | string | '@/utils/intl' | 国际化工具路径 | | pageAliasPrefix | string | '@/pages' | 页面别名前缀 |

注意：dynamic 函数已内置到插件中，通过虚拟模块 virtual:micro-frontend/dynamic 提供，无需额外配置。

路由约定

路由插件遵循 UMI 风格的约定式路由：

• pages/index.tsx → /
• pages/about.tsx → /about
• pages/users/index.tsx → /users
• pages/users/[id].tsx → /users/:id
• pages/users/_layout.tsx → 布局组件

组件元数据

在页面组件中可以定义以下元数据：

const MyPage = () => {
  return <div>My Page</div>;
};

// 页面标题
MyPage.title = "我的页面";

// 是否开启 KeepAlive
MyPage.keepAlive = true;

// 权限配置
MyPage.authority = ["admin", "user"];

export default MyPage;

开发

# 安装依赖
pnpm install

# 构建
pnpm build

# 监听模式开发
pnpm dev

# link成npm包
pnpm link

在使用这个依赖的项目中
pnpm link @lemon-fe/vite-plugin-micro-frontend

# 完事儿，在当前项目
pnpm unlink
另一个项目
pnpm unlink @lemon-fe/vite-plugin-micro-frontend

测试 dynamic.test.ts

npx tsx src/dynamic.test.ts

License

MIT