跳转到主文档

子应用调试

根据研发的不同阶段，我们将子应用调试分为如下两种方式：

  1. 使用本地主应用调试。
  2. 使用线上主应用调试。

使用本地主应用调试​

项目初期，主应用未部署，可以使用本地分别启动主应用、子应用的方式进行调试。

主应用​

配置​

modern.config.js
export default defineConfig({
  runtime: {
    router: true,
    masterApp: {
      manifest: {
        modules: [
          {
            name: 'Dashboard',
            entry: 'http://localhost:8081',
          },
        ],
      },
    },
  },
});

假设本地的子应用的名字为 DashBoard 且启动服务的地址为 http://localhost:8081。配置 runtime.masterApp.modules 字段指定子应用的相关信息。

加载子应用​

使用 useModuleApps API 获取子应用组件，并加载子应用。

App.tsx
import { useModuleApps } from '@modern-js/plugin-garfish';

function App() {
  const { Dashboard } = useModuleApps();

  return (
    <div>
      Master APP
      <Route path="/dashboard">
        <Dashboard />
      </Route>
    </div>
  );
}

子应用​

配置​

modern.config.js
export default defineConfig({
  deploy: {
    microFrontend: true,
  },
});

当 deploy.microFrontend 字段配置为 true 的时候，Modern.js 将认为当前应用是一个微前端子应用，并将其编译为符合 Garfish 子应用规范的产物。

子应用代码​

子应用在代码层面和应用工程是完全一致的。

src/App.tsx
function App() {
  return <div>dashboard</div>;
}
注

目前不支持在子应用中使用 BFF 功能。

然后分别启动主应用和子应用（执行 pnpm dev），主应用访问 8080 端口，子应用访问 8081 端口。浏览器打开 http://localhost:8080/dashboard 就能看到加载了 Dashboard 子应用的效果了。

使用线上主应用调试​

当主应用项目部署之后，Modern.js 提供了用线上主应用调试本地子应用的方式。

注

本小节所用线上地址均是虚构，只为演示方便。

主应用​

配置​

modern.config.js
export default defineConfig({
  server: {
    enableMicroFrontendDebug: true,
  },
  runtime: {
    router: true,
    masterApp: {
      manifest: {
        modules: [
          {
            name: 'Dashboard',
            entry: 'http://modern-js.dev/dashboard',
          },
        ],
      },
    },
  },
});
注

enableMicroFrontendDebug 会在线上开启 微前端 Debug 模式，如担心安全隐患，可只在线上测试环境开启，线上正式环境关掉该配置。

子应用​

配置​

modern.config.js
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 路由后将会加载本地的子应用。

query-debug

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

访问主应用地址如下所示

header-debug

可以看到此时服务端返回的 TableList 子应用信息是 Header 里面指定的本地域名 http://localhost:8080