DEV Community
·
如何使用 ReactJS 实现微前端？
💡
原文约400字/词，阅读约需2分钟。
📝
内容提要
Microfrontend 是一种将大型应用程序分成小块或小应用程序的方法，遵循前端的“微服务”概念。Module Federation 插件允许在应用程序之间共享依赖项。这种架构具有可扩展性，可以用于在不中断生产应用程序的情况下现代化遗留项目。
🎯
关键要点
- Microfrontend 是一种将大型应用程序分成小块或小应用程序的方法，遵循前端的“微服务”概念。
- Host 是主应用程序，负责渲染所有微前端；Remotes 是微前端，可以使用不同的框架。
- Module Federation 插件允许在应用程序之间共享依赖项，定义可暴露或消费的模块。
- 使用 react + viteJs 进行微前端的实现，项目设置不变，Host 作为容器。
- 在 vite.config.ts 中配置 module federation，使用 @originjs/vite-plugin-federation 进行管理。
- Remote 应用程序需要配置 filename、exposes 和 shared，以便导出模块和共享依赖。
- 完成配置后，需要构建项目并通过服务器运行以获取导出的 .js 文件。
- 这种架构具有可扩展性，适合现代化遗留项目而不影响生产应用程序。
🏷️
标签
➡️
