WU / 文档通用微前端
中文

使用 React、Angular 和 WU 构建微前端

了解如何用 WU Framework 集成 React 与 Angular:Shell、适配器、通信和渐进迁移。另有 React/Vue 示例及 Svelte、Lit 绑定参考。

本指南以 React 和 Angular 为例讲解集成。若使用 Svelte、Stimulus 或其他已包含的技术,请查看完整适配器目录。WU 使用独立于框架的生命周期契约。

保留各自的框架,共享集成契约

一个页面可以同时承载 React 和 Angular 业务能力,无需将组件转换为同一种渲染器。每个应用保留自己的构建流程,Shell 提供容器,WU 协调生命周期。同样的方式也适用于渐进迁移:每次替换一项能力,并保留产品原有的访问路由。

这需要调整应用入口。对于控制整个文档的 SPA,仅把 URL 加入目录并不能完成集成。它必须挂载到收到的容器中,并在卸载时释放资源。

React:注册应用实际使用的渲染器

React 适配器接收根组件以及 React 和 ReactDOM 实例。请使用与应用构建相同的运行时;集成指南展示了显式传入运行时的注册方式,以及从 Astro 挂载的方法。

完整的入门路线是创建 React 应用、添加 Vue,然后共享计数器。最后一个示例包含源文件和 ZIP,可用于检查两个渲染器发起的数据更新,以及卸载时的清理行为。

Angular:选择正确的适配器

WU 为基于模块的应用、standalone 组件和 Angular Elements 提供不同的入口。请根据应用架构选择,而不是根据容器名称选择。

Angular 应用 WU API 需要准备的内容
基于 NgModule register 根模块、平台和根选择器
Standalone 组件 registerStandalone 组件、配置和 Angular 创建函数
Angular Elements registerElement Angular Elements 依赖和自定义元素名称

请在适配器参考中查看签名和选项。CLI 提供带构建配置和 standalone 注册的 Angular 模板:迁移现有应用前,先通过 CLI 模板了解它生成的文件。

Framework 4 支持 standalone 输入更新、无 Zone 挂载及使用 Zone.js 的应用。Keep-alive 暂停和恢复组件变更检测器。选项和已验证版本详见适配器矩阵。

React 与 Angular 之间的通信

将视觉状态保留在各渲染器内。通过 store 共享数据,通过事件传递事实,通过契约/RPC 执行操作。Framework 4 中微应用内的绑定使用该应用的 facade 和身份;请声明所需的权限申请及 grants。WU 挂载之外的 standalone 绑定可以使用全局运行时。

共享计数器和 RPC 求和服务示例使用 React 与 Vue 讲解契约。迁移到 Angular 时,保留契约,并按照 Angular 的生命周期调整订阅、视图更新和清理。

Vue、Svelte、Lit 及其他渲染器

该包还发布了 Vue、Svelte、Preact、Solid、Lit、Vanilla、Alpine、Qwik、Stencil、HTMX 和 Stimulus 适配器。Astro 和 Next 有 Shell 集成。适配器目录说明了它们的差异;模板文档区分了代码生成支持与各框架完整构建流程之间的范围。

迁移下一项能力前,请使用项目实际版本检查挂载、导航、样式、通信和卸载。通过生产指南检查发布资源;若应用为空白,请查看故障排查。

一起完善 WU

发现了问题?有新的想法?

你的使用体验能让 WU 变得更好。告诉我们遇到的问题,或支持项目的持续开发。