registermodule 微前端_微前端介绍

一、为什么要学习微前端

什么是微前端

微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。

微前端的核心在于拆, 拆完后在合!

为什么去使用微前端

不同团队间开发同一个应用技术栈不同怎么破？

希望每个团队都可以独立开发，独立部署怎么破？

项目中还需要老的应用代码怎么破？

我们是不是可以将一个应用划分成若干个子应用，将子应用打包成一个个的lib。当路径切换时加载同的子应用。这样每个子应用都是独立的，技术栈也不用做限制了！从而解决了前端协同开发问题

怎样落地微前端

微前端的灵感来源于，计算机上的应用，每一次用户打开一个应用，就相当于打开了一个新的页面

2018年 Single-SPA诞生了， single-spa 是一个用于前端微服务化的 JavaScript 前端解决方案 (本身没有处理样式隔离， js 执行隔离) 实现了路由劫持和应用加载

2019年 qiankun 基于Single-SPA, 提供了更加开箱即用的 API ( single-spa + sandbox + import-html-entry ) 做到了，技术栈无关、并且接入简单(像iframe 一样简单)

总结：子应用可以独立构建，运行时动态加载,主子应用完全解耦，技术栈无关，靠的是协议接入(子应用必须导出 bootstrap、mount、unmount方法)

这里先回答下大家的问题：

这不是iframe吗？

如果使用 iframe ， iframe 中的子应用切换路由时用户刷新页面就尴尬了

应用之间怎么通信

基于URL来进行数据传递，但是传递消息能力弱

基于 CustomEvent 实现通信

基于props主子应用间通信

使用全局变量、 Redux 进行通信

公共依赖

CDN - externals

webpack 联邦模块

微前端架构具备以下几个核心价值：

技术栈无关

主框架不限制接入应用的技术栈，微应用具备完全自主权

独立开发、独立部署

微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新

增量升级

在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略

独立运行时

每个微应用之间状态隔离，运行时状态不共享

二、SingleSpa 实战

Single-Apa完整的项目请参考 gitHub

构建子应用

我们需要父应用加载子应用，需要暴露三个方法：

1. bootstrap

2. mount

3. unmount

1. 构建子应用

// 启动项目安卓依赖

vue create single-child

npm i--save single-spa-vue

// main.js中导入依赖

import singleSpaVue from'single-spa-vue'const appOptions={

el:'#vue', //挂载到父应用中的 id 为 vue 的标签中

router,

render: h=>h(App)

}

const vueLifeCycle= singleSpaVue({ //返回single-spa 的生命周期也就是 bootstrap/mount/unmount

Vue,

appOptions

});//single规定的协议，父应用会调用这些方法

export const bootstrap =vueLifeCycle.bootstrap;

export const mount=vueLifeCycle.mount;

export const unmount=vueLifeCycle.unmount;//这样做还有一个严重的问题，子应用无法启动了？？

2. 配置子应用中的打包路径

//配置vue.config.js

module.exports ={

configureWebpack: {

output: {

library:'singleVue',

libraryTarg:'umd'},

devServer: {

port:10000}

}

};

3. 配置子应用的路由

const router = newVueRouter({

mode:'history',

base:'/vue', //配置路由的基础路径

routes

})

4. 父应用搭建

vue create single-parent

npm i--save single-spa //注意这里是single-spa

5. 将子应用挂载到 id="vue" 的容器中

加载vue引用