微前端
文章平均质量分 85
微前端相关学习
皮蛋很白
没有什么难点是一觉醒来解决不了的
展开
-
微前端解决方案初探 08 基于模块联邦的微前实现方案(管理登录状态、Dashboard 应用初始化和路由保护)
存储和设置登录状态由于每个微应用都有可能用到登录状态以及设置登录状态的方法,所以存储和设置登录状态的方法需要放在容器应用中,哪个微应用需要,就传递给它。创建登录状态和设置方法,并传递给微应用组件:// container\src\App.jsimport React, { lazy, Suspense, useState, useEffect } from 'react'import { Router, Route, Switch } from 'react-router-dom'import原创 2022-02-15 15:50:19 · 600 阅读 · 0 评论 -
微前端解决方案初探 07 基于模块联邦的微前实现方案(Authentication 应用初始化、配置初始路由、微应用懒加载)
Authentication - 应用初始化Authentication 应用和 Marketing 应用的结构相同,可以在其基础上修改,或使用相同步骤创建。首先完成:创建 Auth 目录 - npm 初始化 - 安装依赖 - 修改启动脚本。然后添加 webpack 配置文件:// container\webpack.config.jsconst HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = { mod原创 2022-02-15 15:49:28 · 492 阅读 · 0 评论 -
微前端解决方案初探 06 基于模块联邦的微前实现方案(路由配置、同步路由)
微前端应用路由配置概述在微前端应用中有两种类型的路由:容器应用路由:用于匹配微应用微应用路由:用于匹配组件容器应用使用 BrowserHistory 路由,微应用使用 MemoryHistory 路由,因为:为防止容器应用和微应用同时操作 url 而产生冲突,在微前端架构中,只允许容器应用更新 url,微应用不允许更新 url。MemoryHistory 是基于内存的路由,不会改变浏览器地址栏中的 url,也不会把历史记录同步给浏览器。如果不同的应用程序需要传达有关路由的相关信息,应尽可能原创 2022-02-15 15:47:33 · 1128 阅读 · 0 评论 -
微前端解决方案初探 05 基于模块联邦的微前实现方案(案例概述、Marketing 和 Container 容器初始化、共享模块)
微前端应用案例概述下面通过案例实现一个基于模块联邦的微前端实现方案。该案例包含一个容器应用和三个微应用:Container:容器应用Marketing:营销微应用,包含首页页面组件和价格页面组件Authentication:身份验证微应用,包含登录页面组件Dashboard:仪表盘微应用,包含仪表盘页面组件其中 Container、Marketing、Authentication 使用 React 框架搭建,Dashboard 使用 Vue 框架搭建。Marketing - 应用初始化原创 2022-02-15 15:46:10 · 607 阅读 · 0 评论 -
微前端解决方案初探 04 模块联邦(共享模块、手动挂载应用)
共享模块当前存在的问题当前在 products 和 cart 微应用中都使用了 faker,当 container 加载这两个应用模块后,faker 被加载了两次:通过模块联邦的共享模块可以实现相同模块只需加载一次。实现共享模块使用模块联邦共享模块,只需要在插件配置中添加 shared 配置项即可。修改 products 和 cart 应用的 webpack 插件配置:new ModuleFederationPlugin({ filename: 'remoteEntry.js', n原创 2022-02-15 15:43:44 · 1435 阅读 · 0 评论 -
微前端解决方案初探 03 模块联邦(概述、案例介绍、应用初始化)
模块联邦概述模块联邦(Module Federation)是 Webpack 5 中新增的一项功能,可以实现跨应用共享模块。以下图为例:在 A 应用中有一个 sayHelloFromA 方法,在 B 应用中有一个 sayHelloFromB 方法。如果要实现在 A 应用中调用 B 应用中的 sayHelloFromB 方法,在 B 应用中调用 A 应用的 sayHelloFromA 方法,这种跨应用调用方法的场景可以使用 模块联邦 实现。将每个应用看作一个模块,在一个应用中加载另一个应用,这样就原创 2022-02-15 15:42:08 · 2905 阅读 · 2 评论 -
微前端解决方案初探 02 微前端框架 single-spa
single-spa 概述single-spa 是一个实现微前端架构的框架。在 single-spa 框架中有三种类型的微前端应用:single-spa application / parcel:微前端架构中的微应用,可以使用 vue、react、angular 等框架。single-spa Application 和路由相关联的,根据路由决定访问哪个微应用。single-spa Parcel 的使用方式和前者一样,区别是这种类型的微应用不和路由进行关联,它主要是用于跨应用共享 UI 组件的原创 2022-01-25 07:49:19 · 1824 阅读 · 5 评论 -
微前端解决方案初探 01 微前端介绍、价值、如何实现、systemjs 模块化方案
什么是微前端微前端是一种软件架构,可以将前端应用拆解成一些更小的能够独立开发部署的微型应用,然后再将这些微应用进行组合使其成为整体应用的架构模式。微前端架构类似于组件架构,但不同的是,组件不能独立构建和发布,但是微前端中的应用是可以的。微前端架构与框架无关,每个微应用都可以使用不同的框架。微前端的价值1、增量迁移迁移是一项非常耗时且艰难的任务,比如有一个管理系统使用 AngularJS 开发维护已经有三年时间,但是随时间的推移和团队成员的变更,无论从开发成本还是用人需求上,AngularJS原创 2022-01-25 07:47:30 · 1376 阅读 · 0 评论