{"id":16927891,"url":"https://github.com/yuzhanglong/mf-lite","last_synced_at":"2025-04-10T01:07:07.736Z","repository":{"id":37917128,"uuid":"389388325","full_name":"yuzhanglong/mf-lite","owner":"yuzhanglong","description":":tada: 优雅且实用的基于 webpack module federation 的微前端解决方案 / Elegant and practical micro front-end solution based on webpack module federation.","archived":false,"fork":false,"pushed_at":"2023-03-06T13:29:44.000Z","size":6214,"stargazers_count":163,"open_issues_count":41,"forks_count":21,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-10T01:06:57.686Z","etag":null,"topics":["intl","microfrontend","microfrontend-architecture","module-federation","react","webpack","webpack5"],"latest_commit_sha":null,"homepage":"https://yuzhanglong.feishu.cn/wiki/wikcncmRDZCUJRigluH7skQbtvg","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yuzhanglong.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-07-25T16:08:09.000Z","updated_at":"2025-02-18T14:02:15.000Z","dependencies_parsed_at":"2024-10-27T00:58:10.453Z","dependency_job_id":null,"html_url":"https://github.com/yuzhanglong/mf-lite","commit_stats":{"total_commits":108,"total_committers":3,"mean_commits":36.0,"dds":"0.13888888888888884","last_synced_commit":"3261c127e161061bbc1ec29e0cdcf1dccb0521df"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuzhanglong%2Fmf-lite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuzhanglong%2Fmf-lite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuzhanglong%2Fmf-lite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuzhanglong%2Fmf-lite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yuzhanglong","download_url":"https://codeload.github.com/yuzhanglong/mf-lite/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248137886,"owners_count":21053775,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["intl","microfrontend","microfrontend-architecture","module-federation","react","webpack","webpack5"],"created_at":"2024-10-13T20:35:23.446Z","updated_at":"2025-04-10T01:07:07.718Z","avatar_url":"https://github.com/yuzhanglong.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\u003ca href=\"https://github.com/yuzhanglong/mf-lite\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/56540811/137176565-c6f240c2-73ee-4b9d-bc18-11b29e4512a4.png\" width=\"150\"\u003e\n\u003c/a\u003e\n\u003c/div\u003e\n\u003cbr/\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n基于 Webpack 5 Module Federation，优雅且实用的微前端解决方案。\n\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[在线 DEMO](https://mf-lite-quick-start-base-app.vercel.app/) | [文档](https://yuzhanglong.feishu.cn/wiki/wikcncmRDZCUJRigluH7skQbtvg)\n\u003c/div\u003e\n\n\n## 介绍\n\n**mf-lite** 是一个基于 Webpack 5 Module Federation 来实现模块共享、[qiankun](https://github.com/umijs/qiankun) 来做隔离沙箱的微前端解决方案，它提供以下内容：\n\n- 一个通过命令行快速创建基座应用或者微前端应用的[脚手架](https://github.com/yuzhanglong/mf-lite), 提供项目初始化依赖及开发、构建脚本。[![npm Version](https://img.shields.io/npm/v/@mf-lite/cli.svg)](https://www.npmjs.com/package/@mf-lite/cli)\n\n- 一个[核心工具库](https://github.com/yuzhanglong/mf-lite/tree/master/packages/core), 它可以：[![npm Version](https://img.shields.io/npm/v/@mf-lite/core.svg)](https://www.npmjs.com/package/@mf-lite/core)\n  - 基于 **Webpack Module Federation** 特性，让微前端架构下的的**库共享**(share library)、甚至**模块共享**(share module) 成为可能，且使用更加优雅、易于维护。\n  - 自动生成、处理开发、生产可用的 webpack 的复杂配置项，用户基本上无需直接接触 webpack 的相关配置。\n  - 支持生成远程模块的 typescript 类型定义。\n\n- 一个基于 node.js、方便独立开发微应用的 HTTP [请求代理工具](https://github.com/yuzhanglong/attachments/tree/main/packages/proxy), 使微应用的独立开发方式更加优雅。[![npm Version](https://img.shields.io/npm/v/@attachments/proxy.svg)](https://www.npmjs.com/package/@attachments/proxy)\n\n\n对于用户来说，唯一需要做的就是拉取模板、然后加上一些十分简单的配置，剩下的和平常的开发流程别无二致。\n\n## 特性\n\n📦 **开箱即用**：你只需要执行几行命令即可拉取相应的模板代码并把项目跑起来，包括基座应用和微前端应用，无需处理构建工具的复杂配置。\n\n🤩 **typescript 支持**：模块的生产者和消费者均可自动生成/消费相关的 typescript 类型定义。\n\n🚀 **舒适的开发体验**：开发体验与常规应用一致、完美接入 qiankun 微前端沙箱库、基座和微应用开发都支持热更新，类型定义的生成也不会打断正常的开发流程。\n\n🔨 **独立开发与部署**：基于提供的代理工具，微应用开发者在单独开发微应用时，无需启动基座或者其它微应用。\n\n🌟 **轻量的项目模板**：脚手架生成的初始项目只保留微前端相关的核心依赖，其它第三方库的选型（如 ui 组件库、状态管理库）交由开发者全权管理。\n\n## 快速开始\n\n**安装脚手架工具**\n\n```shell\nnpm install @mf-lite/cli -g\n```\n\n**在交互式命令行中创建项目**\n\n```shell\nmf-lite create\n```\n\n**安装依赖、执行项目**\n\n```shell\nnpm install\nnpm run dev:serve\n```\n\n更多信息以及实践方案，请[查看文档](https://yuzhanglong.feishu.cn/docs/doccnGEPiy8D3DJTZw6S05QJW4f)\n\n## 案例\n\n[快速开始](https://github.com/yuzhanglong/mf-lite/tree/master/examples/quick-start): 最简单的项目 DEMO，开箱即用，全部在本地运行开发。子应用能够共享基座应用暴露出来的模块或者 npm 包。\n\n[微应用独立开发](https://github.com/yuzhanglong/mf-lite/tree/master/examples/micro-app-only): 单独微应用的开发模式，基于部署在远程的基座开发，微应用基于它运行、消费其依赖。\n\n[远程部署案例](https://github.com/yuzhanglong/mf-lite/tree/master/examples/remote-deploy): 通过配置来实现远程部署，其实现效果就是上文的 [在线 DEMO](https://mf-lite-quick-start-base-app.vercel.app/)。\n\n[多个子应用部署案例](https://github.com/yuzhanglong/mf-lite/tree/master/examples/multiply-micro-app): 一个在同一个页面运行多个微应用的案例。\n\n\u003e TIP: 所有案例都可以在本仓库的 `examples` 目录下找到。\n\n## 它是如何工作的\n\n请参考[这篇文章](https://zhuanlan.zhihu.com/p/422460780)\n\n## License\n\nMIT [@yuzhanglong](https://github.com/yuzhanglong)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyuzhanglong%2Fmf-lite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyuzhanglong%2Fmf-lite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyuzhanglong%2Fmf-lite/lists"}