MFA 微前端开发助手

MFA 用于在 VS Code 中获取、启动和联调主应用与微应用。

项目结构

<workspace-root>/
├── .vscode/
│   └── settings.json
├── project/
│   ├── meta.json
│   ├── project.config.json
│   ├── menu.config.json
│   ├── menu.config.local.json
│   └── sitemap.json
├── container/
│   └── <container-name>/
└── microapps/
    └── <microapp-name>/
        ├── .vscode/
        │   └── settings.json
        └── public/
            └── sitemap.json

project.config.json 和 project/sitemap.json 由 MFA 生成；menu.config.local.json 是开发者手动维护的可选本地菜单完整覆盖文件。

工作区配置

{
  // 未启动本地应用时使用的项目级远端地址。
  "mfa.server.proxy.remote.project": "https://example.dev",
  // 项目入口服务处理的 API 代理。
  "mfa.server.proxy.api": {
    // 匹配以 /api 开头的请求。
    "/api": {
      // API 请求转发目标。
      "target": "https://example.dev",
      // 转发时改写 Host 请求头。
      "changeOrigin": true,
      // 不校验目标 HTTPS 证书。
      "secure": false,
      // 转发 WebSocket 请求。
      "websocket": true
    }
  }
}

Sitemap 配置

默认扫描微应用的 src/views/pages。单个微应用需要使用其它目录时，写入 microapps/<app>/.vscode/settings.json：

Vue 页面使用 <sitemap>：

<sitemap lang="json">
{
  "key": "resourceDetail",
  "title": "资源详情",
  "extensions": {
    "permission": "example.resource.detail.view"
  }
}
</sitemap>

React 页面可以使用文件头部注释型 YAML frontmatter：

/**
 * @Sitemap
 * ---
 * key: resourceDetail
 * title: 资源详情
 * extensions:
 *   permission: demo.resource.detail.view
 * ---
 */

应用级结果写入 microapps/<app>/public/sitemap.json，项目级结果写入 project/sitemap.json。