single-spa
前言
其实早就想写一篇关于微前端实践的文章了,几个月之前就看过有关微前端的视频,也查过一些文档,但是好像没有总结,现在又忘记一些了,今天实操了一遍,这里就总结一下,正好实习公司工作小组项目采用的就是微前端。今天先讲解一下single-spa,后面在讲解qiankun。
插曲:今天本来跟着别人一起敲代码,但是发现使用vue-cli脚手架创建项目老是报错,error403。昨天我在公司是可以使用的,通过npm是可以下载包的,但是今天打开电脑就发现报错。找了很多博客,解决一下几个问题:
一:(不记得截屏去了,尴尬)使用vue-cli 创建项目时报错,大致是说,npm 中的插件存在版本问题,后面通过修改./vuer中的配置为true,就可以使用脚手架创建项目。
二:今天在安装single-spa-vue这个包时,包error403,查了一些文章,都说是npm publish的问题,可是我这都没发布包了,怎么可能,后面详细解读错误,找到一个npm 镜像 是公司内部的源,这一下就知道是啥意思了,我Mac没有安装VPN连接公司的内网,所以造成了这一些问题,还有一个就是npm源的问题,可以切换到淘宝源
三:好久没有使用react 了,今天发现create-react-app 版本升级了,之前的不进行维护了,版本为4.0.3,小伙伴记得跟新。
single-spa是啥
single-spa是微前端解决方案的一种解决措施,single-spa由国外大佬发明。single-spa主要步骤是,在主应用中注册所有可能加载的微应用,微应用的声明必须在入口函数中暴露出三个钩子函数(bootstrap,mount,unmount),提供三个函数给主应用使用,bootstrap为启动准备,mount为挂载,unmount为销毁。主应用通过发送请求加载子应用打包好的lib库,然后执行子应用的lib就行。
single-spa实战
1,首先创建一个主应用(可以是vue,react,其他)和子应用
vue create parent-vue //我这里采用了vue
vue create child-vue
2,安装single-spa
// 在主应用中加载single-spa
npm i single-spa --save
// 在子应用中加载single-spa-vue或者single-spa-react
npm i single-spa-vue --save
3,配置主应用的环境,并注册子应用
import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 在主应用中引入single-sap
import { registerApplication,start } from "single-spa";
Vue.config.productionTip = false
// 声明一个函数,用来加载打包好的库
async function loadScript (url) {
return new Promise((resolve,reject)=>{
console.log('go')
let script = document.createElement('script');
script.src = url;
// 加载成功执行成功回调
script.onload = resolve;
script.onerror = reject;
document.head.appendChild(script);
})
}
// 进行注册
registerApplication('childVue',
async () => {
console.log('jiazai ')
// 在这里加载子应用打包出来的 app.js chunk-vendors.js 两个类库,注意加载循序
await loadScript(`http://localhost:10010/js/chunk-vendors.js`);
await loadScript(`http://localhost:10010/js/app.js`)
//加载子应用打包的lib之后,window上面挂载子应用对象,对象中包含钩子函数,将其返回出去
return window.singleVue
},
location => location.pathname.startsWith('/vue')
)
// 启动主应用
start();
new Vue({
router,
render: h => h(App)
}).$mount('#app')
注意:由于主应用与子应用之间存在跨域问题,所以主应用请求加载子应用的时候得进行跨域处理,上面代码使用jsonp,script标签自带跨域功能。
4,配置子应用
import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 引入single-spa-vue微服务插件
import singleSpaVue from "single-spa-vue";
Vue.config.productionTip = false
// new Vue({
// router,
// render: h => h(App)
// }).$mount('#app')
// 生成配置对象
const appOptions = {
el: '#vue',
router,
render: h => h(App)
}
// 子引用必须向外暴露三个钩子函数
const singleLifeCycle = new singleSpaVue({
Vue,
appOptions // 将配置对象传过去
})
// 这里劫持主应用来请求子应用的路由,由于主应用的域名和子应用不同,所以这里劫持,修改域名
if(window.singleSpaNavigate){
__webpack_public_path__ = 'http://localhost:10010/'
}
// 如果主应用没有请求子应用,单独请求子应用,注意挂载点
if(!window.singleSpaNavigate){
delete appOptions.el;
new Vue(appOptions).$mount('#app')
}
// 实例对象上有所需暴露的三个钩子函数
export const bootStrap = singleLifeCycle.bootstrap;
export const mount = singleLifeCycle.mount;
export const unmount = singleLifeCycle.unmount;
注意:配置子应用的时候,按照single-spa协议必须得暴露三个钩子函数。
5,配置子应用打包成为lib
// 在配置中,将子应用打包成lib,给父引用调用
module.exports = {
configureWebpack:{
output:{
library:'singleVue',
libraryTarget:'umd'
},
devServer:{
port:10010
}
}
}
// umd 格式,会将打包好的lib文件挂载到,引用的Window属性上
// 所以父应用可以通过window.bootstrap,window.mount...
在根目录创建一个vue.config.js文件,配置打包。library是打包后的应用名,libraryTarget是打包后的格式。(这里是vue子应用配置)
6,子应用路由配置
// 由于是在主应用上跳转路由,所以这里得在主应用路由基础上 去跳转
const router = new VueRouter({
mode: 'history',
base: '/vue',
routes
})
子应用打包后的文件
app.js
chunk-vendors.js
注意:主应用请求的时候,必须得先请求基础配置包chunk-vendors.js然后才是请求app.js。
总结
其实single-spa文件实现是不难的,从上面看也就几行代码,主要是理解思路,代码是其次,路由跳转路径尤其得注意。
single-spa的缺点:
1,从上面的运行结果可以看出,主应用加载子应用会出现样式冲突,样式污染。
2,js也会存在同样的污染问题(主:window.a 子:window.a 当子应用挂载到主应用时,会出现问题)
3,主应用必须得手动加载子应用打包好的lib库文件,如果子应用比较多,比较麻烦。