# 前言

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

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

# 应用运行前的验证环节

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

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

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

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

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

# 运行前检测工具的简介

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

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

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

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

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

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

如果您遇到困难或对改善 Single-spa playground 有任何建议，请考虑加入我们的 slack 工作区，