yuzhanglong / mf-lite Goto Github PK

:tada: 优雅且实用的基于 webpack module federation 的微前端解决方案 / Elegant and practical micro front-end solution based on webpack module federation.

Home Page: https://yuzhanglong.feishu.cn/wiki/wikcncmRDZCUJRigluH7skQbtvg

License: MIT License

JavaScript 14.68% TypeScript 85.32%

webpack module-federation microfrontend webpack5 intl microfrontend-architecture react

mf-lite's Introduction

基于 Webpack 5 Module Federation，优雅且实用的微前端解决方案。

在线 DEMO | 文档

介绍

mf-lite 是一个基于 Webpack 5 Module Federation 来实现模块共享、qiankun 来做隔离沙箱的微前端解决方案，它提供以下内容：

一个通过命令行快速创建基座应用或者微前端应用的脚手架, 提供项目初始化依赖及开发、构建脚本。
一个核心工具库, 它可以：
- 基于 Webpack Module Federation 特性，让微前端架构下的的库共享(share library)、甚至模块共享(share module) 成为可能，且使用更加优雅、易于维护。
- 自动生成、处理开发、生产可用的 webpack 的复杂配置项，用户基本上无需直接接触 webpack 的相关配置。
- 支持生成远程模块的 typescript 类型定义。
一个基于 node.js、方便独立开发微应用的 HTTP 请求代理工具, 使微应用的独立开发方式更加优雅。

对于用户来说，唯一需要做的就是拉取模板、然后加上一些十分简单的配置，剩下的和平常的开发流程别无二致。

特性

📦 开箱即用：你只需要执行几行命令即可拉取相应的模板代码并把项目跑起来，包括基座应用和微前端应用，无需处理构建工具的复杂配置。

🤩 typescript 支持：模块的生产者和消费者均可自动生成/消费相关的 typescript 类型定义。

🚀 舒适的开发体验：开发体验与常规应用一致、完美接入 qiankun 微前端沙箱库、基座和微应用开发都支持热更新，类型定义的生成也不会打断正常的开发流程。

🔨 独立开发与部署：基于提供的代理工具，微应用开发者在单独开发微应用时，无需启动基座或者其它微应用。

🌟 轻量的项目模板：脚手架生成的初始项目只保留微前端相关的核心依赖，其它第三方库的选型（如 ui 组件库、状态管理库）交由开发者全权管理。

快速开始

安装脚手架工具

npm install @mf-lite/cli -g

在交互式命令行中创建项目

mf-lite create

安装依赖、执行项目

npm install
npm run dev:serve

更多信息以及实践方案，请查看文档

案例

快速开始: 最简单的项目 DEMO，开箱即用，全部在本地运行开发。子应用能够共享基座应用暴露出来的模块或者 npm 包。

微应用独立开发: 单独微应用的开发模式，基于部署在远程的基座开发，微应用基于它运行、消费其依赖。

远程部署案例: 通过配置来实现远程部署，其实现效果就是上文的在线 DEMO。

多个子应用部署案例: 一个在同一个页面运行多个微应用的案例。

TIP: 所有案例都可以在本仓库的 examples 目录下找到。

它是如何工作的

请参考这篇文章

License

MIT @yuzhanglong

mf-lite's People

Contributors

Stargazers

Watchers

mf-lite's Issues

新建模版报错，这个和node的版本有关吗？

/usr/local/lib/node_modules/@mf-lite/cli/node_modules/npm-check-updates/lib/index.js:428
throw err
^

Error: Command failed with ENOENT: plop --plopfile /usr/local/lib/node_modules/@mf-lite/cli/node_modules/@attachments/assets/lib/configurations/node-plop/micro-fe-generator.js
spawn plop ENOENT
at Process.ChildProcess._handle.onexit (node:internal/child_process:282:19)
at onErrorNT (node:internal/child_process:477:16)
at processTicksAndRejections (node:internal/process/task_queues:83:21) {
errno: -2,
code: 'ENOENT',
syscall: 'spawn plop',
path: 'plop',
spawnargs: [
'--plopfile',
'/usr/local/lib/node_modules/@mf-lite/cli/node_modules/@attachments/assets/lib/configurations/node-plop/micro-fe-generator.js'
],
originalMessage: 'spawn plop ENOENT',
shortMessage: 'Command failed with ENOENT: plop --plopfile /usr/local/lib/node_modules/@mf-lite/cli/node_modules/@attachments/assets/lib/configurations/node-plop/micro-fe-generator.js\n' +
'spawn plop ENOENT',