Fronts 2.0
运行时指南

Module Federation 集成

Fronts 使用 Module Federation 交付时的所有权边界、producer 兼容等级与验证路径。

目的与所有权

Fronts core 不依赖 Module Federation。只有选择 MF 作为交付 transport 时,才使用 @fronts/mf 把一个显式传入的官方 Runtime instance 适配到 Fronts loader;它不实现第二套 manifest parser、share resolver、remote registry 或 bundler plugin。

Fronts 选择部署并治理应用生命周期;官方 Runtime 负责 remote 注册、manifest 解释、expose 加载和 shared dependency。Host 必须把显式官方 instance 传给 adapter。producer 必须 expose 有效 FrontsApp(通常是 ./application);只有 React/Vue component 不满足契约。Fronts 不依赖 producer 插件私有/virtual Host API,不推断或改写 share graph。部署应使用不可变 remote name,因为 Runtime 会缓存 registration 与 loaded module。

兼容等级

等级含义
Core-native不依赖 MF;自定义 AppLoader 提供相同 Fronts protocol
Official integration官方 Runtime + 官方 producer plugin,仓库集成与 E2E 覆盖
Verified producer compatibility第三方产物由官方 Runtime 消费,并通过规定的 Fronts 生命周期 E2E
Narrow compatibility fixture只承诺仓库锁定的版本、输出格式和运行模式,不泛化为整个插件支持

“Verified”只说明仓库证明了表中路径,不把第三方插件所有权转移给 Fronts,也不承诺所有版本和输出格式。

集成矩阵

交付路径Host loaderProducer 产物开发模式production preview等级
自定义 loader、无 MF用户 AppLoader任意有效 FrontsApp sourceCore-native
@module-federation/rsbuild-plugin@fronts/mf + 官方 RuntimeMF manifestOfficial integration
@module-federation/vite无 federation plugin 的 Vite shell + 官方 RuntimeMF manifestOfficial integration
vite-plugin-federation同一 plain shell + 官方 RuntimeMF manifestVerified producer compatibility
@originjs/vite-plugin-federation同一 plain shell + 官方 RuntimeESM remoteEntry.jsbuild + previewNarrow fixture

所有 Vite 路径都复用 examples/vite-host 的普通 Vite Host。Host 不安装 federation build plugin, 而是在运行时创建官方 instance 并交给 @fronts/mf

官方 Rsbuild 与 Vite producer

两者是首选路径,并输出由官方 Runtime 消费的 manifest。相较裸 entry,manifest 保留预加载、 snapshot、类型提示和 DevTools 需要的 metadata;Fronts 不直接读取内部字段。仓库证明官方 Rsbuild 暴露 React/Vue 应用,官方 Vite 暴露框架无关应用,并验证 mount、framework readiness、update、 Host service、unmount,以及完整示例中的 DOM、Shadow DOM 和跨源 iframe。

vite-plugin-federation

未加 scope 的插件作为兼容 producer 支持,不是 Fronts Host runtime。fixture 输出 mf-manifest.json,Host 通过自己的官方 Runtime instance 消费;插件自带 runtime 不能传给 @fronts/mf。同一 lifecycle E2E 覆盖 Vite dev server 与全新 production preview,承诺范围只限 仓库中 manifest producer 路径。

OriginJS 的窄边界

OriginJS fixture 以 ESM 构建并从 assets/remoteEntry.js 加载。由于没有可用的 bundleless remote dev,fixture 的 dev 实际是 build + preview;它固定 Vite 5.4,因为当前 transform 与仓库 Vite 8/ Rolldown producer pipeline 不兼容。生成的 @fronts/core fallback 被保留,并通过 share-scope 初始化验证。Fronts 不使用或支持 OriginJS virtual:__federation__ Host API。

这不代表支持 SystemJS/var 输出、OriginJS 充当 Host loader 或任意更新版 Vite pipeline。扩展 声明必须新建 fixture,同时验证 lifecycle 与 shared dependency。

依赖选择

场景Consumer 依赖
Fronts 不使用 MF@fronts/core
Fronts Host 加载 MF remote@fronts/core@fronts/mf@module-federation/runtime
React/Vue producer对应 Fronts adapter、框架、选择的 MF producer plugin
框架无关官方 Vite remote@fronts/core@module-federation/vite
第三方 Vite producercore 或框架 adapter + producer plugin;不增加 Fronts Runtime API

精确 peer range 以 package manifest 为准。

增加新 producer 的完成条件

新兼容声明必须:expose 有效 ./application;由 plain Host 的显式官方 instance 加载;测试 mount/readiness、Host service、update、unmount 和 idle audit;产物带 share graph/fallback 时验证 shared 行为;分别记录 dev 与 production,不能用未支持模式扩大声明;从不同 Host origin 验证 CORS 和 public asset URL;最后在矩阵中写明精确证据边界。仅仅兼容一个 producer artifact 不需要新增 Fronts Runtime API。

验证

MF 单测验证 source、官方 instance 调用、不可变绑定、preload、取消和真实 remote container; pnpm test:e2e 覆盖开发命令,pnpm test:e2e:preview 重建所有 producer 后覆盖生产产物。 vite-runtime.spec.tsoriginjs-runtime.spec.tsvertical-slice.spec.ts 分别提供对应证据。

本页目录