MFA - 微前端开发助手

在 VS Code 中获取微前端项目、启动主应用与微应用、通过统一入口联调、管理 Sitemap 与菜单,并构建本地整包。核心能力来自 @seed-fe/mfa,已随扩展打包,无需全局安装。
工程约定
<workspace-root>/
├── project/ # 项目配置仓库(meta.json、menu.config.json、dev.local.jsonc 等)
├── container/<name>/ # 主应用
└── microapps/<name>/ # 微应用
开始使用
- 点击 Activity Bar 中的 MFA 图标,打开 MFA Tree View。
- 新工作区执行 MFA: 获取项目 并输入项目配置仓库地址;已有工程执行 MFA: 刷新项目。
- 在 MFA Tree View 中为应用获取源码并启动,统一入口地址显示在项目服务的 Terminal 中。
主要功能
- 应用启停:在 MFA Tree View 中获取源码、启动(或以 Mock 启动)和停止应用,每个进程独占一个 Terminal。
- 控制台(MFA: 打开控制台):查看项目与应用信息,拉取、推送迭代分支,打 Tag。
- Sitemap:生成与查看应用级、项目级 Sitemap。页面声明可选:不写时按页面路由生成;需要标题、权限等信息时,在页面文件中通过编辑器标题栏的 MFA: 插入 Sitemap 基础配置 写入声明骨架再补充。
- 菜单配置:从控制台进入,把 Sitemap 页面拖入菜单并编排分组与外链;可编辑正式配置,或只在本地生效的临时配置。
- 本地构建(MFA: 本地构建项目):选择应用与工程配置,构建并在工程根
dist/ 生成制品。
配置
开发服务、端口、代理与包管理器等本机设置都写在 project/dev.local.jsonc(不存在时新建,应加入项目配置仓库的 .gitignore),CLI 与扩展共用这一份配置。
接口代理按路径前缀配置,保存即生效:
{
"server.proxy.api": {
"/api/": { "target": "https://gateway.example.invalid", "changeOrigin": true },
},
// 可选:API 共享的 Bearer Token
// "server.proxy.token": "",
}
更多字段(端口、整包环境兜底、出站代理、包管理器等)见 @seed-fe/mfa 文档。
License
BSD-3-Clause
| |