子应用调试
根据研发的不同阶段,我们将子应用调试分为如下两种方式:
- 使用本地主应用调试。
- 使用线上主应用调试。
使用本地主应用调试
项目初期,主应用未部署,可以使用本地分别启动主应用、子应用的方式进行调试。
主应用
配置
export default defineConfig({
runtime: {
router: true,
masterApp: {
manifest: {
modules: [
{
name: 'Dashboard',
entry: 'http://localhost:8081',
},
],
},
},
},
});
假设本地的子应用的名字为 DashBoard
且启动服务的地址为 http://localhost:8081
。配置 runtime.masterApp.modules
字段指定子应用的相关信息。
加载子应用
使用 useModuleApps API 获取子应用组件,并加载子应用。
import { useModuleApps } from '@modern-js/plugin-garfish';
function App() {
const { Dashboard } = useModuleApps();
return (
<div>
Master APP
<Route path="/dashboard">
<Dashboard />
</Route>
</div>
);
}
子应用
配置
export default defineConfig({
deploy: {
microFrontend: true,
},
});
当 deploy.microFrontend
字段配置为 true 的时候,Modern.js 将认为当前应用是一个微前端子应用,并将其编译为符合 Garfish 子应用规范的产物。
子应用代码
子应用在代码层面和应用工程是完全一致的。
function App() {
return <div>dashboard</div>;
}
注
目前不支持在子应用中使用 BFF 功能。
然后分别启动主应用和子应用(执行 pnpm dev
),主应用访问 8080
端口,子应用访问 8081
端口。浏览器打开 http://localhost:8080/dashboard
就能看到加载了 Dashboard
子应用的效果了。
使用线上主应用调试
当主应用项目部署之后,Modern.js 提供了用线上主应用调试本地子应用的方式。
注
本小节所用线上地址均是虚构,只为演示方便。
主应用
配置
export default defineConfig({
server: {
enableMicroFrontendDebug: true,
},
runtime: {
router: true,
masterApp: {
manifest: {
modules: [
{
name: 'Dashboard',
entry: 'http://modern-js.dev/dashboard',
},
],
},
},
},
});
注
enableMicroFrontendDebug
会在线上开启 微前端 Debug 模式,如担心安全隐患,可只在线上测试环境开启,线上正式环境关掉该配置。
子应用
配置
export default defineConfig({
deploy: {
microFrontend: true,
},
});
本地启动子应用,其端口为 8080
。
Query 模式调试
访问主应用地址 http://master.example.com/
并在 URL 后加上 Query ?__debug__micro-frontend-debug-name=TableList&__debug__micro-frontend-debug-entry=http://localhost:8080
。
此时访问主应用后,服务端注入的子应用模块信息将被替换为我们 Query 里的信息。即 TableList
子应用 entry
为 http://localhost:8080
。线上主应用切换到 /tablelist
路由后将会加载本地的子应用。
Header 模式调试(推荐)
Query 调试时,当路透跳转的时候,Query 参数会丢失,reload 页面后,服务端返回的子应用信息里将不会注入本地的子应用信息。可以使用 Header 模式来调试,获取更稳定的调试开发体验。
环境要求
ModHeader 是用于 Mock 浏览器请求/返回 Header 的浏览器插件。使用 ModHeader 支持的浏览器(Chrome、Firefox、Opera、Edge),并安装 ModHeader 插件。
配置 Header
配置如下 Header:
x-micro-frontend-module-name TableList
x-micro-frontend-module-entry http://localhost:8080
访问主应用地址如下所示
可以看到此时服务端返回的 TableList
子应用信息是 Header 里面指定的本地域名 http://localhost:8080