@anthropic/vite-plugin-micro-frontend

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

安装

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

功能特性

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

使用方式

$3

不启动 Vite 时也可单独生成 mf.tsx 和 routes.ts，适合 CI、pre-commit 或按需生成。

1. 在业务项目 package.json 中增加脚本：

`json
{
"scripts": {
"generate": "mf generate"
},
"devDependencies": {
"@lemon-fe/vite-plugin-micro-frontend": "workspace:*"
}
}
`

2. 配置来源（任选其一）：

- mf.config.js / mf.config.cjs / .mfrc.js（项目根目录）：

`js
// mf.config.js
module.exports = {
routes: {
pagesDir: "src/pages",
outputPath: "src/routes.ts",
routeTemplate: {},
},
federation: {
remotes: [
{ remoteName: "ama", entry: "/app-ama/remote.js" },
{ remoteName: "whs", entry: "/app-whs/remote.js" },
],
outputPath: "src/utils/mf.tsx",
},
};
`

- package.json 的 microFrontend 或 mf 字段：

`json
{
"microFrontend": {
"routes": { "pagesDir": "src/pages", "outputPath": "src/routes.ts" },
"federation": {
"remotes": [{ "remoteName": "ama", "entry": "/app-ama/remote.js" }],
"outputPath": "src/utils/mf.tsx"
}
}
}
`

3. 执行：

`bash
pnpm run generate


或


npx mf generate
`

配置可与 vite.config 中 microFrontendPlugins 的 options 保持一致，建议抽成共用配置（如单独 config 文件）在 vite 与 CLI 间复用。

$3

`typescript
// 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(),
},
},
});
`

$3

`typescript
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",
},
},
}),
],
});
`

配置选项

$3

| 选项 | 类型 | 默认值 | 说明 |
| --------------- | ------------------------------ | ---------------------------------------- | ------------------------------- |
| 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 配置 |

$3

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

$3

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

$3

| 选项 | 类型 | 默认值 | 说明 |
| ----------------------------- | -------- | ------------------------ | -------------- |
| 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 → 布局组件

$3

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

`tsx
const MyPage = () => {
return

;
};

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

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

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

export default MyPage;
`

开发

`bash


安装依赖

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

`shell
npx tsx src/dynamic.test.ts
``

License

MIT