基于 Webpack 5 Module Federation,优雅且实用的微前端解决方案。
介绍
mf-lite 是一个基于 Webpack 5 Module Federation 来实现模块共享、qiankun 来做隔离沙箱的微前端解决方案,它提供以下内容:
-
一个通过命令行快速创建基座应用或者微前端应用的脚手架, 提供项目初始化依赖及开发、构建脚本。
-
一个核心工具库, 它可以:
- 基于 Webpack Module Federation 特性,让微前端架构下的的库共享(share library)、甚至模块共享(share module) 成为可能,且使用更加优雅、易于维护。
- 自动生成、处理开发、生产可用的 webpack 的复杂配置项,用户基本上无需直接接触 webpack 的相关配置。
- 支持生成远程模块的 typescript 类型定义。
-
一个基于 node.js、方便独立开发微应用的 HTTP 请求代理工具, 使微应用的独立开发方式更加优雅。
对于用户来说,唯一需要做的就是拉取模板、然后加上一些十分简单的配置,剩下的和平常的开发流程别无二致。
特性
快速开始
安装脚手架工具
npm install @mf-lite/cli -g
在交互式命令行中创建项目
mf-lite create
安装依赖、执行项目
npm install
npm run dev:serve
更多信息以及实践方案,请查看文档
案例
快速开始: 最简单的项目 DEMO,开箱即用,全部在本地运行开发。子应用能够共享基座应用暴露出来的模块或者 npm 包。
微应用独立开发: 单独微应用的开发模式,基于部署在远程的基座开发,微应用基于它运行、消费其依赖。
远程部署案例: 通过配置来实现远程部署,其实现效果就是上文的 在线 DEMO。
多个子应用部署案例: 一个在同一个页面运行多个微应用的案例。
TIP: 所有案例都可以在本仓库的
examples
目录下找到。
它是如何工作的
请参考这篇文章
License
MIT @yuzhanglong