简单记录学习single-spa的过程（1）

丰言丰语
2,312 阅读5分钟

开始

本系列主要是带大家走读一下single-spa的源码，方便作者本人学习思考的过程，分享出来，只是为了让自己在学习的过程中印象更加深刻一些，如果错误欢迎指正。

目录

微前端的概念

我不知道各位小伙伴啥时候听到微前端的这个概念的，本人也是从去年年底（19年底）【菜狗勿喷】才听到的这个概念，但是基于公司业务繁忙，一直没有什么时间，直到最近才重新想起还有这么个东西可以看看，那我这里简单跟大家分享一下我所接触的一个过程以及我的感受吧， 首先基于微前端这个概念，其实我接触到现在都还是觉得大家提的都是比较模糊的，比如JAVA的同事可能就会以spring-cloud作为微服务的一个标准去做叙述，但是前端好像目前比较出名的也就是qiankun，single-spa这两个大兄弟，又从qiankun的github上看到我们qiankun大兄弟也是基于single-spa做的一个封装，那么我就觉得不如先single-spa

官网/github

官网地址： single-spa.js.org/

github： single-spa.js.org/

简单的介绍 官方快速开始

官网所提供的一些案例 官方案列

快速浏览完官方的简单介绍后，得到的一些结论或者是想法

  1. 可以将原本可能前端这边之前会基于框架比如react，vue的时候去做开发的大型项目，后续维护的过程中基于框架的限制，可能就只能继续使用开始的框架进行开发的情况有所缓解。
  2. 一个新的大型项目，也许可以按照服务治理的一些概念去做划分，然后通过不同的团队同时进行开发，再进行整合

在这里官方也提出了他对微前端的一些观念，看法, 感兴趣的大兄弟可以去康康

我选择继续查看官网所提供的案列，来看看single-spa所带来的具体的表现

官方案列

由于本人在工作中接触的更多是vue的项目，所以我在这里选择了vue案列进去后看到有6个项目。。。 github案列

感觉脑袋被瞬间打蒙， 不急不急我还是略微看的懂一丢丢外文的，一个明显的Start here 巴拉巴拉引起我的注意，我决定先把这个拉取下来康康

single-spa-root-config: 项目结构

从文件结构来说是比较简单的源码文件估计也就是src下的两个文件，简单看一下

首先是index.ejs文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue Microfrontends</title>
  <meta name="importmap-type" content="systemjs-importmap" />
  <!-- 这里为了加载更快我直接写在本地了 -->
  <script type="systemjs-importmap">
    {
      "imports": {
        "@vue-mf/root-config": "https://vue.microfrontends.app/root-config/b97fcc901d70c84b4ea9bf58c8e4fd17fb35db3f/vue-mf-root-config.js",
        "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.5.1/lib/system/single-spa.min.js",
        "@vue-mf/styleguide": "https://vue.microfrontends.app/styleguide/5bc183e421e6028ee06677ed6cfb7c8663742233/vue-mf-styleguide.js",
        "@vue-mf/navbar": "https://vue.microfrontends.app/navbar/61d1ec434105221cf4d0b6847fe71983ee165157/js/app.js",
        "vue": "https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js",
        "@vue-mf/dogs-dashboard": "https://vue.microfrontends.app/dogs-dashboard/d93f86623c1d20c7e728350b067fa3b3acc7a45b/js/app.js",
        "@vue-mf/rate-dogs": "https://vue.microfrontends.app/rate-dogs/ed2333ac6586531ce34333ad98cb892dc0467c45/js/app.js",
        "vue-router": "https://cdn.jsdelivr.net/npm/vue-router@3.1.6/dist/vue-router.min.js",
        "@vue-mf/root-config/": "https://vue.microfrontends.app/root-config/b97fcc901d70c84b4ea9bf58c8e4fd17fb35db3f/",
        "@vue-mf/navbar/": "https://vue.microfrontends.app/navbar/61d1ec434105221cf4d0b6847fe71983ee165157/js/",
        "@vue-mf/dogs-dashboard/": "https://vue.microfrontends.app/dogs-dashboard/d93f86623c1d20c7e728350b067fa3b3acc7a45b/js/",
        "@vue-mf/styleguide/": "https://vue.microfrontends.app/styleguide/5bc183e421e6028ee06677ed6cfb7c8663742233/",
        "@vue-mf/rate-dogs/": "https://vue.microfrontends.app/rate-dogs/ed2333ac6586531ce34333ad98cb892dc0467c45/js/"
      }
    }
  </script>
  <!-- <script type="systemjs-importmap" src="https://storage.googleapis.com/vue.microfrontends.app/importmap.json"></script> -->
  <% if (isLocal) { %>
  <script type="systemjs-importmap">
    {
      "imports": {
        "@vue-mf/root-config": "//localhost:9000/vue-mf-root-config.js"
      }
    }
  </script>
  <% } %>
  <script src="https://cdn.jsdelivr.net/npm/import-map-overrides/dist/import-map-overrides.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/systemjs/dist/system.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/systemjs/dist/extras/amd.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/systemjs/dist/extras/named-exports.js"></script>
</head>
<body>
  <script>
    System.import('@vue-mf/styleguide');
    System.import('@vue-mf/root-config');
  </script>
  <import-map-overrides-full show-when-local-storage="devtools" dev-libs></import-map-overrides-full>
</body>
</html>

ejs我没接触过我理解应该是一个模版渲染的引擎，就当html看就行，跟早非常出名的jsp应该异曲同工，看到这个文件底下其实引入了非常多的东西，第一眼能看到的就两个attr比较特殊的script标签type="systemjs-importmap"写着systemjs估计跟这个库有点关系，但是我不太熟悉不过没关系我们先往下看，要有一个大体印象先，在对应的标签下面是一个JSON，都包含imports这个属性, 映射的地址，我们再往下看。

  <!--  估计跟最下方的 import-map-overrides-full标签有什么基情  -->
  <script src="https://cdn.jsdelivr.net/npm/import-map-overrides/dist/import-map-overrides.js"></script>
  <!--  systemjs -->
  <script src="https://cdn.jsdelivr.net/npm/systemjs/dist/system.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/systemjs/dist/extras/amd.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/systemjs/dist/extras/named-exports.js"</script>

引入了大概三个跟SystemJs有关的三方依赖以后终于有一段js

  // 引入了上面imports中 @vue-mf/styleguide 对应的js
  System.import('@vue-mf/styleguide');
    // 引入了上面imports中 @vue-mf/root-config 对应的js
  System.import('@vue-mf/root-config');

这里就按照方法名进行了一个猜测， 就是动态的引入了上面注册的两个链接，为了验证猜测就需要把项目给启动起来

// 安装依赖
yarn install or npm install
// 启动项目
yarn start or npm run start

启动以后就可以通过在浏览器输入http://localhost:9000/进行浏览啦～

这里我为了印证刚刚的猜想需要打开一下调试工具，看看NetWork的模块

chrome network 看起来没猜错 ☕☕☕

浏览器页面如下: Rate doggos

从我们刚刚的目录结构肯定是不会有这个页面的，那么估计就跟我们本地的另一个文件vue-mf-root-config.js有关，文件内容如下：

  import { registerApplication, start } from "single-spa";

  registerApplication({
    name: "@vue-mf/navbar",
    app: () => System.import("@vue-mf/navbar"),
    activeWhen: "/",
  });

  registerApplication({
    name: "@vue-mf/dogs-dashboard",
    app: () => System.import("@vue-mf/dogs-dashboard"),
    activeWhen: "/view-doggos",
  });

  registerApplication({
    name: "@vue-mf/rate-dogs",
    app: () => System.import("@vue-mf/rate-dogs"),
    activeWhen: "/rate-doggos",
  });

  start();

这里看起来还是比较好理解的，基于root-config这个注册中心然后通过方法registerApplication(...)将3个服务给注册上去，后通过start(...)来启动整个整个微前端应用，上面三个注册的应用大家有没有觉得有点眼熟？我们在之前的github上面能分别找到对应的子项目，那么我们这个root-config项目就算是浏览完毕。demo的内容基本主要是印证了Configuring single-spa的知识点，不过代这里基于每一个切分出来的应用，我们还没有进行项目浏览讲解，学习。那么我们下一次我就大家一起看看，一个子应用他的结构是怎么样的，以及对于框架vue来说，single-spa究竟是怎么让他变成微服务中的一个应用～～

感谢各位在我这里浪费5分钟听我吹水，我们下篇文章见～

avatar
文章
阅读
粉丝