npm package: @lemon-fe/vite-plugin-micro-frontend
Description: Vite 微前端插件集合，包含路由自动生成、模块联邦、qiankun 集成等功能
Latest version: 1.2.0

# @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`）

## 使用方式

### CLI 生成（类似 umi generate tmp）

不启动 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 间复用。

### 完整使用（推荐）

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

### 按需使用单独插件

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

## 配置选项

### 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` → 布局组件

### 组件元数据

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

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

// 页面标题
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