微前端浅析

目录

什么是微前端

Systemjs 模块化解决方案

Single-spa 微前端框架实战

基于 Module Federation 的微前端架构


什么是微前端

npm 包的几个注意点 

-使用前端项目 还是以npm 包为主的 发布的效率是不高的 如果需要迭代 npm 包里面的一些业务逻辑 需要发布这个包之后 每一个使用这个模块都需要更新一次(这是对内的)

对外也是一样的 用户拿到之后也是需要更新的 还需要在内部更新发布

那把公用的部分做成 npm包的形式 效率也是非常高的

-多团队使用的话也不方便  如果一个人做的包是一个形式 另一个也是另一种风格

那么 做大项目就很难了

微前端

----微前端只是管理这种复杂性的一种方法,通过将产品拆分为更小、更简单的应用程序,这些应用程序可以由独立的自治团队一直交付到生产环境。

----微前端是从微服务的概念借鉴而来

----把整个 前端的一个大的整体分解成小而简单的块,那么这些块可以去单独的开发 部署

        同时仍然可以将这些块聚合到一起 成为产品 到客户面前去展示

----多个可独立交付的小型前端应用 聚合在一个整体应用的一种架构风格

----这种思想 模块 风格就是微前端

微前端解决了哪些问题

项目太多太杂 

项目时间很久 运用了各种技术 要整合到一起

升级更新新的功能非常的繁琐

把之前的旧项目 直接放到微前端里面 进行开发

微前端本身不是一门技术 整合了策略方法思维的这种方法的架构模型

什么项目适合 微前端架构

拆分巨型项目使项目变得更加容易维护

兼容历史应用 实现增量开发

微前端架构的特点

独立部署 增量迁移 团队自治 松耦合代码

微前端架构方案

*组织模式  基座模式(必须有一个大的容器 应用最多的)  去中心模式(脱离这种模式)

Systemjs 模块化解决方案 

 对兼容性不好 版本要求很高

webpack的配置文件

微前端浅析

微前端浅析

Single-spa 微前端框架实战

是什么

官网地址:https://single-spa.js.org/  是一个实现微前端的架构框架

在single-spa框架中有三种类型的微前端应用:

创建容器去接纳

1.single-spa-application/parcel :微前端架构框架中的微应用,可以使用vue,react,angulard等框架

2.single-spa root config:创建微前端容器应用

3.utility modules:公共模块应用,菲渲染组件,用于跨应用共享javascript逻辑的微应用

创建

1.安装 :

npx create-single-spa --moduleType root-config

微前端浅析

 

  1. 创建后,导航到新创建的应用程序文件夹

  2. start使用您首选的包管理器运行脚本

 

注册应用程序#
返回 root-config 并将您的应用程序添加到导入映射中 src/index.ejs

推荐应用的 package.json name 字段
注册为单一水疗应用程序

如果不使用 single-spa 布局引擎

打开 src/root-config.js
删除注册@single-spa/welcome为应用程序的代码
取消注释示例registerApplication代码并使用应用程序的模块名称更新它
如果使用 single-spa 布局引擎

删除现有<application name="@single-spa/welcome"></application>元素
<application name=""></application>使用name上一步中导入映射中使用的模块名称添加您自己的元素
就是这样!您的第一个单水疗应用程序现在应该在您的根配置中运行。

运行

create-single-spa

没有全局安装的情况下使用create-single-spa:

npm init single-spa

#or
npx create-single-spa

#or
yarn create single-spa

上一篇:设计模式 - 单例模式


下一篇:SAP 类特性相关表