小知识，大挑战！本文正在参与“程序员必备小知识”创作活动
写在最前
掌握技术是为了更好的服务，用更少的精力解决更多的问题是我们学习技术的主要原因
前言
Question: 为什么需要微前端？它能解决什么？
微前端的理念类似于微服务，将庞大的整体拆成可控的小块，并明确它们之间的依赖关系。
我们可以将服务按照业务功能进行拆分成一系列子应用，做到高内聚低耦合，同时通过交互协议来管理这些应用间的依赖关系。独立开发，独立部署，允许多技术栈存在，不仅可以降低成本引入新技术，还允许更低风险的替换局部功能，这就意味着每次技术更新、架构更替、依赖升级、UI改版等都可以更平稳的进行
技术选型
single-spa
Single-spa 从现代框架组件生命周期中获得灵感，将生命周期应用于整个应用程序。 它脱胎于 Canopy 使用 React + React-router 替换 AngularJS + ui-router 的思考，避免应用程序被束缚。现在 single-spa 几乎支持任何框架。 由于 JavaScript 因其许多框架的寿命短而臭名昭著，我们决定让它在任何您想要的框架都易于使用。
不多逼逼，动手吧！
根目录创建
全局安装 create-single-spa
npm install --global create-single-spa
# or
yarn global add create-single-spa
初始化项目
npm init single-spa
1.文件包名
2.构建项目类型
你将要创建 single-spa应用，公共模块，或者根配置。（这里我们选择 single-spa root config）
3. 你希望使用的构建工具？
这里我们选择 npm
4.是否使用ts？
这里我们选择 否
5. 是否使用 single-spa的布局？
这里选择 是
6.项目组织名称
输入完毕后回车
安装完毕之后项目结构如下
简单来个项目运行吧！
项目初始化完毕之后，我们可以运行一下 npm run start；运行完成之后进入 http://localhost:9000/ 如果显示如此，那我们就搭建完毕了根项目了！
这里就有一个问题了！
我们好像也没做啥居然就可以有东西显示出来，是怎么做的呢？
让我们打开 src 文件夹
先看看 '前缀'-root-config.js 文件
import { registerApplication, start } from "single-spa";
import {
constructApplications,
constructRoutes,
constructLayoutEngine,
} from "single-spa-layout";
import microfrontendLayout from "./microfrontend-layout.html";
const routes = constructRoutes(microfrontendLayout);
const applications = constructApplications({
routes,
loadApp({ name }) {
return System.import(name);
},
});
const layoutEngine = constructLayoutEngine({ routes, applications });
applications.forEach(registerApplication);
layoutEngine.activate();
start();
首先 routes 通过 传入 microfrontendLayout 给解析函数 constructLayoutEngine 抛出值之后然后在将 routes 传递给 constructApplications 获得 applications数组，通过 single-sap提供 registerApplication 方法注册对应的应用，就这么简单！
（解析函数先不做分析，如果有兴趣，留言一下，开个章节我们进行解析！!）
接下来看看 microfrontendLayout 这个参数的来源地址
microfrontend-layout.html
这个就比较简单了，和vue的路由注册其实差不多
<single-spa-router>
<main>
<route default>
<application name="@single-spa/welcome"></application>
</route>
</main>
</single-spa-router>
@single-spa/welcome 其实就是我们根配置运行的时候显示的内容了！可是他是怎么配置的，指向又是哪里呢？
index.ejs
<% if (isLocal) { %>
<script type="systemjs-importmap">
{
"imports": {
"@single-spa/welcome": "https://unpkg.com/single-spa-welcome/dist/single-spa-welcome.js",
"@main/root-config": "//localhost:9000/main-root-config.js"
}
}
</script>
<% } else { %>
.....
<% } %>
这个配置看看就懂了
总结
本文介绍了，为什么需要微前端和它解决的业务痛点，还有根配置的搭建。。。
好了，下一章带大家搭建single-spa应用....
本章就到这里，喜欢请关注我！
