了解这7个微前端框架，摸鱼时间可以大大增加！！

已于 2024-07-03 10:02:02 修改
阅读量3.1k 收藏 46
点赞数 67
分类专栏： 前端 文章标签： 前端 架构 前端框架
于 2024-07-01 16:42:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/SWQ4520/article/details/140104708
版权

大家好，我是CodeQi！ 

在2024年，前端开发的世界变得越来越分散化。

作为一名开发者，我深刻感受到微前端架构在大型项目中的重要性和便利性。

微前端技术不仅解决了单体前端应用的复杂性，还提高了开发团队的独立性和灵活性。

​今天，我将和大家分享2024年最受欢迎的7个微前端框架，并详细讲解每个框架的使用方法。

1. Single SPA

简介

Single SPA 是一个能让你将多个微前端应用组合成一个整体的 JavaScript 框架。它允许你在一个页面中运行多个不同的前端应用程序，并且这些应用程序可以用不同的框架（如 React、Angular、Vue）构建。

安装和设置

  1. 1. 创建项目目录

    mkdir single-spa-root
cd single-spa-root

  2. 2. 安装 single-spa-cli

    npm install -g create-single-spa

  3. 3. 创建 root-config

    npx create-single-spa

  4. 4. 选择 "root-config" 类型并按照提示完成项目配置

  5. 5. 安装所需依赖

    cd root-config
npm install

配置示例

在 src/index.ejs 文件中添加以下内容：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>single-spa</title>
<script src="https://unpkg.com/systemjs/dist/system.js"></script>
<script>
      System.import('single-spa-config');
    </script>
</head>
<body>
<single-spa-router></single-spa-router>
</body>
</html>

在 src/root-config.js 文件中：

import { registerApplication, start }from'single-spa';

registerApplication({
name:'@org-name/react-app',
app:() =>System.import('@org-name/react-app'),
activeWhen:['/react'],
});

registerApplication({
name:'@org-name/vue-app',
app:() =>System.import('@org-name/vue-app'),
activeWhen:['/vue'],
});

start();

2. Qiankun

简介

Qiankun 是一个基于 single-spa 实现的微前端框架，它极大地简化了微前端应用的搭建和管理过程。Qiankun 提供了更多的开箱即用特性，如沙箱机制、样式隔离等。

安装和设置

  1. 1. 创建主应用

    mkdir qiankun-main
cd qiankun-main
npx create-react-app main-app
cd main-app
npm install qiankun --save

  2. 2. 配置主应用在 src/index.js 文件中：

    import { registerMicroApps, start }from'qiankun';

registerMicroApps([
{
name:'reactApp',
entry:'//localhost:7100',
container:'#container',
activeRule:'/react',
},
{
name:'vueApp',
entry:'//localhost:7101',
container:'#container',
activeRule:'/vue',
},
]);

start();

  3. 3. 创建子应用对于 React 子应用：

    npx create-react-app react-app
cd react-app
npm install --save qiankun

    在 src/index.js 文件中：

    import { renderWithQiankun, qiankunWindow }from'qiankun';

functionrender(props){
const{ container }= props;
ReactDOM.render(<App />, container ? container.querySelector('#root'):document.querySelector('#root'));
}

if(!qiankunWindow.__POWERED_BY_QIANKUN__){
render({});
}

exportasyncfunctionbootstrap(){}
exportasyncfunctionmount(props){
render(props);
}
exportasyncfunctionunmount(props){
const{ container }= props;
ReactDOM.unmountComponentAtNode(container ? container.querySelector('#root'):document.querySelector('#root'));
}

3. Module Federation (Webpack 5)

简介

Module Federation 是 Webpack 5 引入的一项功能，它使得模块能够在运行时被加载和共享。通过 Module Federation，可以实现微前端架构中的应用和组件共享。

安装和设置

  1. 1. 创建项目目录

    mkdir module-federation-app
cd module-federation-app

  2. 2. 安装 Webpack 5

    npm init -y
npm install webpack webpack-cli --save-dev

  3. 3. 配置 Webpack在 webpack.config.js 文件中：

    const HtmlWebpackPlugin=require('html-webpack-plugin');
constModuleFederationPlugin=require('webpack').container.ModuleFederationPlugin;

module.exports={
entry:'./src/index',
mode:'development',
devServer:{
contentBase:'./dist',
},
output:{
publicPath:'http://localhost:8080/',
},
module:{
rules:[
{
test:/\.jsx?$/,
loader:'babel-loader',
exclude:/node_modules/,
options:{
presets:['@babel/preset-react'],
},
},
],
},
plugins:[
newModuleFederationPlugin({
name:'app',
remotes:{
remoteApp:'remoteApp@http://localhost:8081/remoteEntry.js',
},
shared:['react','react-dom'],
}),
newHtmlWebpackPlugin({
template:'./public/index.html',
}),
],
};

4. Piral

简介

Piral 是一个用于构建微前端应用的框架，它支持创建可扩展的微前端架构。Piral 提供了强大的 CLI 工具和丰富的插件，使得开发过程更加顺畅。

安装和设置

  1. 1. 创建 Piral 实例

    npm init piral-instance my-app
cd my-app
npm start

  2. 2. 创建微前端插件

    npm init pilet --source my-app
cd my-pilet
npm start

  3. 3. 配置 Piral在 src/index.tsx 文件中：

    import { renderInstance } from 'piral';
import { layout, errors } from './layout';

renderInstance({
  layout,
  errors,
  plugins: [],
});

5. Micro Frontends with React

简介

Micro Frontends with React 是通过组合多个独立的 React 应用来实现微前端架构的方案。每个子应用可以独立开发和部署，并且通过模块联邦或 iframe 等技术集成到主应用中。

安装和设置

  1. 1. 创建主应用

    npx create-react-app main-app
cd main-app

  2. 2. 创建子应用

    npx create-react-app child-app
cd child-app

  3. 3. 集成子应用在 main-app/src/App.js 文件中：

    import Reactfrom'react';

functionApp(){
return(
<div className="App">
      <h1>Main App</h1>
      <iframe src="http://localhost:3001" title="Child App" />
    </div>
);
}

exportdefaultApp;

6. Luigi

简介

Luigi 是一个由 SAP 开发的微前端框架，专注于企业级应用的需求。它提供了简单的 API 和丰富的功能，如导航、权限管理等。

安装和设置

  1. 1. 创建 Luigi 应用

    npx @luigi-project/create-react-app my-app
cd my-app

  2. 2. 配置 Luigi在 luigi-config.js 文件中：

    Luigi.setConfig({
navigation:{
    ​nodes:[{
    ​    ​pathSegment:'home',
        ​​label:'Home',
    ​    ​viewUrl:'/home',
    ​    ​}],
    ​},
});

7. Mosaic

简介

Mosaic 是一个微前端框架，旨在帮助团队构建灵活、可扩展的前端应用。它支持多种前端框架，并提供了强大的开发工具和插件系统。

安装和设置

  1. 1. 创建 Mosaic 项目

    npx create-mosaic-app my-app
cd my-app

  2. 2. 配置 Mosaic在 mosaic.config.js 文件中：

    module.exports={
    ​apps:[{
    ​    ​    ​name:'app1',
    ​    ​    ​entry:'./src/app1/index.js',
   }],
};

结论

通过对这7个微前端框架的详细介绍和安装配置示例，我相信你已经对它们有了更深刻的理解。

每个框架都有其独特的优势和适用场景，选择合适的框架可以极大地提高开发效率和项目质量。

希望这篇文章对你有所帮助，期待你在微前端的世界中探索出更多的可能性。

祝你编码愉快！Happy coding!

关注我，原创文章第一时间推送， 点赞和收藏就是最大的支持❤️

微前端框架qiankun剖析
浮游的博客
04-19 3051
作为目前微前端领域首屈一指的框架，qiankun无论是从接入的方便程度还是从框架本身提供的易用性来说都是可圈可点的。qiankun基于single-spa进行了二次开发，不但为用户提供了简便的接入方式（包括减少侵入性，易于老项目的改造），还贴心的提供了沙箱隔离以及实现了基于发布订阅模式的应用间通信方式，大大降低了微前端的准入门槛，对于微前端工程化的推动作用是不可忽视的。
（五）微前端之框架
Luckyzhoufangbing的博客
02-05 565
1. 官方学习文档 乾坤是在 single-spa 的基础上进行的封装 上手简单 官网：介绍 - qiankun 代码实战：快速上手 - qiankun 2. 项目实战 基座项目（主应用）：Vue 微应用（子应用）：2个 -- Vue 、原生 html 页面 由于 qiankun 是通过 fetch 去获取微应用的引入的静态资源的，所以必须要求这些静态资源支持跨域 主应用： import Vue from 'vue' import App from './App.vue' import r
工程化与框架系列（10）--微前端架构
最新发布
欢迎来到我的博客，希望你能有所收获！
02-28 537
工程化与框架之旅第十站
2020 非常火的11个微前端框架
Github中文社区
10-19 1万+
点击上方“Github中文社区”，关注看遍Github，每天提升 作者 | Jonathan Saring译者 | Flora https://itnext.io/11-micr...
三大主流微前端框架，you love who？
热门推荐
程序员成长指北
01-30 1万+
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号 回复1，加入高级Node交流群背景及相关信息微前端目前已经是大型前端应用中常见的技术，目前微前端常用的框架主要有三个：无界qiankun 乾坤MicroApp那么这三种微前端框架各有什么优缺点，在企业中进行大型应用开发时，应该如何进行选择呢？这篇文章讲由浅入深的告诉你答案！原文：https://juejin.cn/user/...
微前端架构
qq_40407998的博客
01-31 4362
微前端 iframe sigle-spa 京东 microApp 阿里乾坤 qiankun
【S7-1200 CAN远程控制实战】：远程访问与监控技术揭秘
![西门子S7-1200 CAN总线通信例程... ...# 1.... 在工业自动化领域，远程控制技术的应用已成为提高生产效率和实现智能制造的关键。作为众多自动化解决方案中的一员，西门子S7-1200 PLC（可编程逻辑控制器）凭借其强大的处理能
Java开发常见专业术语
weixin_42408447的博客
05-10 1万+
1.脚本 脚本（Script），是使用一种特定的描述性语言，依据一定的格式编写的可执行文件。 2.http协议 HTTP协议，即超文本传输协议(Hyper text transfer protocol)。是一种详细规定了浏览器和万维网(WWW = World Wide Web)服务器之间互相通信的规则，通过因特网传送万维网文档的数据传送协议。 3.B/S结构和C/S结构 B/S（Browser/Server）：指浏览器和服务器架构。 C/S（Client/Server）：指客户端和服务器架构 4.报文 报文
[转]PKM－个人知识体系建设
dbbv11995的博客
07-20 1万+
这里集中了本站所有关于个人知识库、个人知识体系方面的文章，下面是展开的目录： PKM理论和方法 艾宾浩斯与他的遗忘曲线 记忆核系统 资料整理的方法 电子资料整理技巧 图书馆馆藏电子资料管理方法分析 浅谈资料...
java基础复习篇
m0_67247641的博客
11-01 550
Java泛型是JDK5中引入的一个新特性。使用泛型参数，可以增强代码的可读性、稳定性。编译器可以对泛型参数进行检测，并且通过泛型参数可以指定传入的对象类型。比如：ArrayList persons = new ArrayList()这行代码就指明了该ArrayList()这行代码就只能传入Person对象，如果传入其他类型的对象就会报错。并且，原生 List 返回类型是 Object，需要手动转换类型才能使用，使用泛型后编译器自动转换。
电商峰值系统架构设计
RockeyHoo的专栏
11-12 8046
电商架构         目录   一、          电商峰值系统架构设计....................................................................................................................................................
微前端之 一 微前端框架介绍
我的世界我的光彩
03-22 1289
微前端 优点 缺点
【前端知识】微前端框架qiankun
wendao76的专栏
12-10 4990
Qiankun是一款由蚂蚁金服推出的微前端框架，它基于single-spa进行二次开发，旨在将Web应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。Qiankun是一款功能强大的微前端框架，它通过将大型前端应用拆分为多个小型应用，提高了开发效率和可维护性。同时，Qiankun提供了沙箱机制，确保了微应用之间的隔离性。然而，Qiankun也存在一些局限性，如不支持多实例场景、对Vite等构建工具的支持不够友好等。因此，在选择是否使用Qiankun时，需要根据具体项目的需求和团队的技术栈进行综合考虑。
微前端框架大对比：Qiankun、Single-SPA、Wujie 等热门框架优缺点分析
mmc123125的博客
11-27 6640
随着单体前端应用的日益庞大和复杂，开发团队面临着越来越多的挑战：如何应对代码的持续增长？如何管理多个团队协作开发？如何避免前端技术栈的单一依赖？在这种背景下，微前端架构应运而生，成为一种解决大规模前端应用问题的新思路。微前端（Micro Frontend）是从微服务架构（Microservices）中借鉴而来的一种前端架构模式。它的核心思想是将一个大型的前端应用拆分成多个独立的、自治的模块或应用，分别由不同的团队开发、部署和维护。
微前端框架主流方案剖析
xiangzhihong8的专栏
04-14 648
微前端架构是为了在解决单体应用在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，从一个普通应用演变成一个巨石应用(Frontend Monolith)后，随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。微前端框架内的各个应用都支持独立开发部署、不限技术框架、支持独立运行、应用状态隔离但也可共享等特征。本文会从框架的应用隔离实现方案、实战、优缺点三个方面探一探各个框架。帮助大家了解各个框架是如何使用，如何运行，从而能选出适合自己项目的微前端方案。
微前端：乾坤 、无界、single-spa、iframe对比
m0_56416159的博客
07-10 3809
微前端框架是一种技术解决方案，旨在将大型前端应用拆分为多个小型、独立、可维护的微前端应用，每个微前端应用可以独立开发、测试、部署和运行，同时保持整体的协同工作和用户体验。这种架构类似于微服务架构，但专注于前端领域。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CodeQi技术小栈

喝杯咖啡

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值