第三章 single-spa 接入子应用

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

前言

在上一章中我们创建了一个子应用并确定应用可以正常的启动了，在这一章节中，我们要继续上一章节的内容，在根配置中接入我们的子应用。

根配置

我们先进行根文件的配置吧！

microfrontend-layout.html

在我们的之前配置中，我们使用的是single-spa提供的路由，在microfrontend-layout.html文件中，我们进入到这个文件配置一下路由。

<single-spa-router>
  <main>
    <route default>
      <application name="@single-spa/welcome"></application>
    </route>
    <route path="navbar">
      <application name="@navbar-public/navbar"></application>
    </route>
  </main>
</single-spa-router>

可以看见这里有两个路由 default 和 navbar，这里我们先看看 navbar 这个我们新增的模块

<application name="@navbar-public/navbar"></application>

画重点，记住 @navbar-public/navbar 这个！等会考试要考的

index.ejs

在我们配置了'@navbar-public/navbar'的路由后，我们需要在文件中引入这个路径(记住是这个文件启动的路径！)

<script type="systemjs-importmap">
    {
      "imports": {
        "@single-spa/welcome": "https://unpkg.com/single-spa-welcome/dist/single-spa-welcome.js",
        "@navbar-public/navbar": "http://localhost:8080/js/app.js",
        "@main/root-config": "//localhost:9000/main-root-config.js"
      }
    }
  </script>

添加内容为："@navbar-public/navbar": "http://localhost:8080/js/app.js",

子应用

首先我们创建一个和main.js同级的文件，set-public-path.js

set-public-path.js

创建好文件后添加这个代码

import { setPublicPath } from 'systemjs-webpack-interop'

setPublicPath('@navbar-public/navbar', 2)

细心的同学可能发现了 @navbar-public/navbar 和根项目的名字好像是一样的欸，这就是我们打包的时候几个埋坑点了，这个name需要和我们的package.json中的name一致，不然的话就会出现如下的报错
ok这里就完毕了！

运行

这里我们先启动子应用的服务，之后在启动根配置的服务； 然后跳转至

http://localhost:9000/navbar

OK，看看效果！

总结

本章正式接入了我的子应用，但是这并不够！首先正常的一个业务登录系统需要的是登录页，主题框架，页面路由等，这里我们的要求还很远，之后还会再优化的，喜欢的话请关注我！