single-spa

• 前言
• single-spa是啥
• 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庫文件，如果子應用比較多，比較麻煩。

總結

以上是生活随笔為你收集整理的微前端之single-spa的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。