webpack5 模块联邦 single-spa基座微前端 systemjs

最近比较闲，看了一些前端微前端的内容流行的大概分为两种方式
注意：项目实战可以用一下qiankun（基座微前端）

一种是webpack5 模块联邦
用webpack5创建2个项目，项目中创建组件，这些组件就可以在2个项目中调用
通过插件ModuleFederationPlugin共享组件
目前该配置只能自己用webpack搭建项目，脚手架生成项目存在不少问题
该方式仅支持同一技术栈项目

plugins: [new ModuleFederationPlugin({name: "app_two",library: { type: "var", name: "app_two" },filename: "remoteEntry.js",exposes: {Search: "./src/Search"}})]

一种是基座微前端
他们依赖systemjs，封装成框架，比如 single-spa
安装全局 single-spa （最新版本有bug，建议2.0.3版本）
执行命令 create-single-spa 创建项目
三种应用类型，先创建根应用，创建多个子应用。
single-spa application / parcel  --子应用
in-browser utility module (styleguide, api cache, etc)  --工具应用
single-spa root config --根应用

webpack5 模块联邦 single-spa基座微前端 systemjs相关推荐

微前端实践--webpack5模块联邦
webpack5推出一个非常令人惊艳的功能叫module federation,中文叫模块联邦,它提供了一套在不同项目构建之间的调度.运行机制.它很像微前端,但又不限于此.本文结合案例介绍一下该特性的 ...
vue为基座微前端嵌入html,使用Vue CSR的微前端实现方案实践
在这里就不讲微前端的种种优缺点,直接假设你在负责一个中后台管理系统的开发,所有的业务模块全部都在一个项目中打包,随着业务量的不断增长,编译越来越慢,你期望可以从老的项目中将新版的业务进行独立开发.独立 ...
使用webpack5模块联邦
WHAT(Module Federation 是什么?) Module Federation [ˌfedəˈreɪʃn] 使 JavaScript 应用得以在客户端或服务器上动态运行另一个 bundl ...
微前端在得物客服域的实践/那么多微前端框架，为啥我们选Qiankun + MF
一.业务背景当前客服一站式工作台包含在线服务.电话.工单和工具类四大功能,页面的基本结构如下: 每个业务模块相对独立,各有独立的业务体系,单个模块体积较大,项目整体采用SPA + iframe的架构 ...
微前端应用及基于qiankun的微前端实践
示例代码仓库: yl-qiankun-base:https://gitee.com/dongche/yl-qiankun-base.git yl-qiankun-child-vue:https://g ...
字节跳动是如何落地微前端的
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群本文内提及的 Garfish 微前端解决方案已开源:https://github.com/m ...
微前端qiankun使用+踩坑
背景项目使用qiankun 改造的背景: 项目A.项目B.项目C: 项目A和项目B具有清晰的服务边界,从服务类型的角度能够分为两个项目. 在公司项目一体化的背景下,所有的项目又应该是一个项目. 项目 ...
你怎么会懂？字节跳动是如何落地微前端的？
微前端的出现的背景和意义微前端是什么:微前端是一种类似于微服务的架构,是一种由独立交付的多个前端应用组成整体的架构风格,将前端应用分解成一些更小.更简单的能够独立开发.测试.部署的应用,而在用户看来 ...
微前端（一）微前端是什么？为什么要用微前端？
微前端是什么? 参考网站: https://micro-frontends.org https://microfrontends.com 微前端就是与多个可以独立发布功能的团队一起构建现代化web应用 ...

webpack5 模块联邦 single-spa基座微前端 systemjs

webpack5 模块联邦 single-spa基座微前端 systemjs相关推荐

最新文章

热门文章