微前端框架之 single-spa从基本使用 -> 部署 -> 框架源码分析 -> 手写框架，带你全方位刨析 sing

从基本使用 -> 部署 -> 框架源码分析 -> 手写框架，带你全方位刨析 single-spa 框架

前序

目的

会使用single-spa开发项目，然后打包部署上线
刨析single-spa的源码原理
手写一个自己的single-spa框架

过程

编写示例项目
打包部署
框架源码解读
手写框架

关于微前端的介绍这里就不再赘述了，网上有很多的文章，本文的重点在于刨析微前端框架single-spa的实现原理。

single-spa是一个很好的微前端基础框架，qiankun框架就是基于single-spa来实现的，在single-spa的基础上做了一层封装，也解决了single-spa的一些缺陷。

因为single-spa是一个基础的微前端框架，了解了它的实现原理，再去看其它的微前端框架，就会非常容易了。

提示

先熟悉基本使用，熟悉常用的API，可通过示例项目 + 官网相结合来达成
如果基础比较好，可以先读后面的手写 single-spa 框架部分，再回来阅读源码，效果可能会更好
文章中涉及到的所有代码都在 github（示例项目 + single-spa源码分析 + 手写single-spa框架 + single-spa-vue源码分析）

示例项目

新建项目目录，接下来的所有代码都会在该目录中完成

mkdir micro-frontend && cd micro-frontend

示例代码都是通过vue来编写的，当然也可以采用其它的，比如react或者原生JS等

子应用 app1

新建子应用

vue create app1

按图选择，去除一切项目不需要的干扰项，后面一路回车，等待应用创建完毕

配置子应用

以下所有的操作都在项目根目录/micro-frontend/app1下完成

vue.config.js

在项目根目录下新建vue.config.js文件

const package = require('./package.json')
module.exports = {
  // 告诉子应用在这个地址加载静态资源，否则会去基座应用的域名下加载
  publicPath: '//localhost:8081',
  // 开发服务器
  devServer: {
    port: 8081
  },
  configureWebpack: {
    // 导出umd格式的包，在全局对象上挂载属性package.name，基座应用需要通过这个全局对象获取一些信息，比如子应用导出的生命周期函数
    output: {
      // library的值在所有子应用中需要唯一
      library: package.name,
      libraryTarget: 'umd'
    }
  }
}

安装`single-spa-vue`

npm i single-spa-vue -S

single-spa-vue负责为vue应用生成通用的生命周期钩子，在子应用注册到single-spa的基座应用时需要用到

改造入口文件

// /src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import singleSpaVue from 'single-spa-vue'

Vue.config.productionTip = false

const appOptions = {
  el: '#microApp',
  router,
  render: h => h(App)
}

// 支持应用独立运行、部署，不依赖于基座应用
if (!window.singleSpaNavigate) {
  delete appOptions.el
  new Vue(appOptions).$mount('#app')
}

// 基于基座应用，导出生命周期函数
const vueLifecycle = singleSpaVue({
  Vue,
  appOptions
})

export function bootstrap (props) {
  console.log('app1 bootstrap')
  return vueLifecycle.bootstrap(() => {})
}

export function mount (props) {
  console.log('app1 mount')
  return vueLifecycle.mount(() => {})
}

export function unmount (props) {
  console.log('app1 unmount')
  return vueLifecycle.unmount(() => {})
}

更改视图文件

<!-- /views/Home.vue -->
<template>
  <div class="home">
    <h1>app1 home page</h1>
  </div>
</template>

<!-- /views/About.vue -->
<template>
  <div class="about">
    <h1>app1 about page</h1>
  </div>
</template>

环境配置文件

.env

应用独立运行时的开发环境配置

NODE_ENV=development
VUE_APP_BASE_URL=/

.env.micro

作为子应用运行时的开发环境配置

NODE_ENV=development
VUE_APP_BASE_URL=/app1

.env.buildMicro

作为子应用构建生产环境bundle时的环境配置，但这里的NODE_ENV为development，而不是production，是为了方便，这个方便其实single-spa带来的弊端（js entry的弊端）

NODE_ENV=development
VUE_APP_BASE_URL=/app1

修改路由文件

// /src/router/index.js
// ...
const router = new VueRouter({
  mode: 'history',
  // 通过环境变量来配置路由的 base url
  base: process.env.VUE_APP_BASE_URL,
  routes
})
// ...

微前端框架 之 single-spa

前序

提示