前端进阶学习

# 前言

上面几章大概的内容是给大家讲解了 微前端 到底是个什么东西，面对日常的业务我们应该如何抉择是否对当前的产品使用 微前端 方向的框架

这一章介绍的工具，是基于 single-spa 框架做的浏览器插件的介绍，微前端 和我们日常的开发框架中使用的一些插件还是有些许的差别的，所以为了帮助大家看完本小册后，可以正常的去使用 single-spa 框架搭建的微应用项目，当大家了解了应该做什么样的东西，在什么情况下可能出现什么样的问题，哪怕以后不用 single-spa 框架的时候，没有合适的插件，也可以迅速的定位到问题

# 应用运行前的验证环节

在应用运行前，脚手架安装完成之后，single-spa 有一套独立的检测方案，保证我们在运行前的环境是没有问题的，对于初学者来说这是很重要的一环：

在我们通过 single-spa 对 微前端 项目进行本地化构建后，命令行会显示以上信息：1就是我们的正常启动项目；2就是用来测试我们的微前端项目是否可以正常运行，当我们打开2网址后，会自动重定向到 single-spa-playground.org/ (opens new window) ，在该网址下展示脚手架安装好的子应用：

在右下角会有一个 playground 的 icon ，点击弹出下图内容：

image-20210210170853635

微应用的运行前检测工具一共分 5 个阶段：

  • 运行前检测工具的简介
  • 如何构建微前端应用
  • 验证微前端应用
  • root config（根配置）
  • QA

# 运行前检测工具的简介

这里简介就没有什么太多要讲的东西，大概的意思就是告诉大家下面的几项做了哪些东西：

Single-spa playground 是一个网站，可帮助您使代码与 single-spa (opens new window) 配合使用。如果您不知道什么是 single-spa，请观看此介绍视频 (opens new window)

single-spa 还具有一个浏览器扩展程序，可以连接到您浏览器的开发工具中。Single-spa playground 和浏览器扩展程序可以协同工作，以帮助您调试 single-spa 应用程序。

Single-spa playground 将指导您构建成功的 single-spa 应用程序，突出显示重要步骤，并为您提供工具以帮助您了解问题所在。

请注意，这不是使用 single-spa 的唯一方法，但是通过更好地理解概念，您将能够以自己喜欢的任何方式应用它。这是我们要做的：

  • 在单独的git仓库中有微前端。我们将专注于React，但是您可以使用Angular，Vue等
  • 测试您的微前端是否正确构建
  • 了解并创建一个root config，它将为您的微前端进行路由。
  • 独立部署您的微前端（了解更多）。

如果您遇到困难或对改善 Single-spa playground 有任何建议，请考虑加入我们的 slack 工作区 (opens new window)，pull request (opens new window)或提 issue (opens new window)。

# 如何构建微前端应用

这一步演示了如何去创建一个 single-spa 应用程序，由于 single-spa 应用程序没有自己的HTML文件，因此它们不能作为独立应用程序运行。相反，它们会生成可动态注入HTML文件的javascript和CSS。Single-spa playground 允许您动态地将JavaScript和CSS注入其中，以便您可以测试应用程序

在没有介绍 root config 之前，如果您想独立测试当前构建的 single-spa 应用程序，可以通过 npm run start:standalone 来执行独立运行

这里我是用 react 做的微应用构建，vue相关我会在后面的章节做详解

# 验证微前端应用

在这部分其实就是验证 当前构建的 single-spa 应用是否可以正常运行的一个过程，前面的东西可以大概看看是什么意思，在 root config 部分的时候，在一起讲了就好，大概的意思就是通过配置 import map 然后在 single-spa 中注册

校验当微应用是否可以正常运行一共有六步：

  • 可以从提供的URL下载应用程序
  • 检查应用程序是否具有共享依赖项
  • 应用程序代码执行时没有javascript错误
  • 正确导出了单spa生命周期方法（引导程序，安装和卸载）
  • 应用程序可以挂载到DOM
  • 卸载生命周期正常工作
  • 重新安装应用程序

检测正常通过应该是上图的展示方式，这样保证我们当前的微应用是可以正常运行的

# root config（根配置）

root config 就是运行一个微应用的核心功能，我称之为 桥接器，通过 systemsjs 设置每一个微应用的导入项

<script type="systemjs-importmap">
  {
  "imports": {
    "@spa/spa": "//localhost:8500/spa-spa.js"
  }
}
</script>

在通过 single-spa 注册每一个微应用

singleSpa.registerApplication(
  '@spa/spa',
  () => System.import('@spa/spa'),
  location => location.pathname.startsWith('/')
);

singleSpa.start();

从而达到通过 桥接器 串联每一个微应用，实现一个完整应用的效果，yarn start 一下就可以了

# QA

这里就是 single-spa 给大家留的搜索问题和解决问题的入口：

如果您想让事情顺利进行，请随时[通过single-spa-playground提出Github问题](https://github.com/single-spa/single-spa-playground/issues/new?body= %23%23 Data dump Applications%3A json { "name"%3A "%40spa%2Fspa"%2C "pathPrefix"%3A "%2F"%2C "useNativeModules"%3A false } Import map%3A json { "imports"%3A { "%40spa%2Freact"%3A "8500"%2C "%40spa-vue%2Fsingle-spa-vue"%3A "https%3A%2F%2Flocalhost%3A8080%2Fjs%2Fapp.js"%2C "%40spa%2Fspa"%3A "%2F%2Flocalhost%3A8500%2Fspa-spa.js" }%2C "scopes"%3A {} } %23%23 Description )，或加入我们的 slack 工作区 (opens new window)。

可能有些人遇到过类似的问题，因此请确保在提交新问题 (opens new window)之前先搜索现有问题或已解决的问题 (opens new window)

# 应用运行后的浏览器插件

上面讲到了运行前会出现的一些情况和解决办法，接下来要说的就是运行后通过插件来检测当前微应用的运行状态是否正常

# 安装地址

Chrome (opens new window)

Firefox (opens new window)

# 要求

版本要求： >= single-spa@4.1.

# 特征

# 配置应用覆盖记录

应用覆盖主要提供如下功能：移入一个已经挂载的App的名字时，会展示这个App在浏览器DOM的什么位置，类似我们平时使用的审查元素，当很多应用同时挂载的时候这个功能很有用（例如某些场合下一个单独的页面中4个不同的应用先后加载时）

为了添加应用覆盖, 找到你导出生命周期函数的那个文件（例如bootstrap、mount、unmount）并以如下格式添加你自己希望的配置:

// 常量的名字必须是devtools
export const devtools = {
  overlays: {
    // selectors是必选项
    selectors: [
      // 该配置时css选择器构成的数组，在每个应用的最外层，以该选择器作为标识
      // 你可以设置多个标识，类似多个parcel或‘不同容器对应不同试图’的用法
      "#my-app",
      ".some-container .app"
    ],
    // options不是必选项
    options: {
      // 这些选项用来配置‘覆盖’的样式和一些操作
      width: "100%",
      height: "100%",
      zIndex: 40,
      position: "absolute",
      top: 0,
      left: 0,
      color: "#000",
      background: "#000",
      textBlocks: [
        // 你可以给‘覆盖’添加额外的文本，例如，你可以添加这个配置的开发人员的名字
        // 这个数组中的每个字符串都会在一个新的div中
        // 例如：'blue squad', 'is awesome'会被解析成
        // <div>blue squad</div><div>is awesome</div>
      ]
    }
  }
};

# 重写导入映射 (import-maps)

如果你的环境中使用了导入映射(import-maps) (opens new window)，当使用import-map-overrides库 (opens new window)时，检测工具会提供一个接口用于添加自定义的‘导入映射’来覆盖默认值，在满足组件安装条件 (opens new window)之后，你就可以创建、移除、刷新页面来查看你覆盖的效果.

# 操作步骤

当我们按照以上的方法下载并安装以后，通过 localStorage.setItem('devtools', true) 激活控制台，并刷新页面，这时，屏幕下方应该会有：

一个橘黄色的小图标，然后点击打开

image-20210210171003670

通过 Add new module 按钮添加当前微应用即可：

image-20210210171011934

一般情况下当通过 single-spa 脚手架下载后就会自动存在了，不需要额外手动添加，但是一但出现了什么问题，这里也是一个很好发现问题的地方

当我们微应用配置正确的时候，就可以正常访问我们的微应用了：

image-20210210171019827

上图红色框内的内容就是当前应用内所有微应用的名称、状态、动作、import 路径等，因为是基础讲解我就创建了一个项目，所以 App Name 只有一项

到这里基本上就可以发现在开发微应用项目前所遇到的大部分问题，从而找到相应的解决办法，接下来我们就可以走到开发阶段了

# 结束语

当然，插件存在的好处还是很明显的，可以帮助大家迅速的排除一些问题，可视化的界面也方便大家清晰的看见当前框架内的一些方法和属性的分布，但是我并不建议大家过于依赖插件，插件是可以快速帮助我们解决问题，但是对于个人发展和长期的成长来看，我并不觉得它是一个很好的东西：

如果没有插件的存在，不论是我们状态的管理、页面的渲染等问题，可能会通过打断点、baidu、google、甚至爱学习的同学会去看源码，这是一个良性的过程，只不过比较麻烦，但是学到的东西，都是自己的；

如果用插件的话，你是可以比不用的更快定位到问题，但是习惯性依赖的发生，就会导致不愿意花更多的精力去研究问题的产生原因，这并不是一个好的现象

但是不是让大家完全不去用插件，如果初学的时候还是要通过插件保证整体的运行状态正常，才能让我们更好的学下去

上述的情况也是以一个刚接触某框架初期开发的一个案例，当我们做了很多年的时候，可能很多人就不需要了，反正我目前 vue 和 react 相关的插件一个都没用过。。。

阅读全文

← Root Config 概念 →