子应用在相同目录下

基于 single-spa 来搭建一个 react 的微前端应用，主应用以及子应用都在同一个个目录下，即下方的 micro-front 下

Step 1 新建一个目录，并初始化

mkdir mirco-front && cd micro-front
npm init -y

Step 2 增加 webpack 配置

怎么简单怎么来，因为后面我们是用的 react，并且是用 CRA 来创建的子应用，所以这个 webpack 的基本配置需要支持 react、svg、css 等，入口文件对应的是我们下一步创建的 single-spa.config.js 文件

Step 3 增加 single-spa.config 文件

这个文件是我们微前端应用的根文件，是总的一个配置文件，文件配置看着官网的来就行，这里注册了 app1 和 app2，这两个都是用 CRA 创建的

import * as singleSpa from "single-spa"

singleSpa.registerApplication(
    "app1",
    () => import("./app1/src"),
    () => location.pathname.startsWith("/app1"),
    {}
)
singleSpa.registerApplication(
    "app2",
    () => import("./app2/src"),
    () => location.pathname.startsWith("/app2"),
    {}
)

singleSpa.start()

Step 4 创建子应用

npx create-react-app app1 app2

Step 5 改造两个子应用

目前这两个子应用还是独立的，并没有通过 single-spa 的处理，也就无法直接成为子应用，在子应用中安装 single-spa-react 这是 single-spa 提供的专门用来处理 react。的一个库，我们把我们的子应用如下处理，自行调整一下显示效果就行，用作区分就行

import React from "react"
import ReactDOM from "react-dom"
import singleSpaReact from "single-spa-react"
import App from "./App.js"

function domElementGetter() {
    return document.getElementById("app1")
}

const reactLifecycles = singleSpaReact({
    React,
    ReactDOM,
    rootComponent: App,
    domElementGetter,
})

export const bootstrap = [reactLifecycles.bootstrap]
export const mount = [reactLifecycles.mount]
export const unmount = [reactLifecycles.unmount]

⚠️ 需要注意的一点：不同的子应用有不同的容器来进行渲染，比如 app1 渲染到 id 为 app1 的标签中去，同理 app2

Step 6 新建一个 index.html 页面

就像我们原先的 SPA ，都会有一个 html 页面来进行渲染，一般里面会有一个 id = root 的容器，这里同理，不过这里是有两个容器，一个 id = app1，另一个是 app2，为了方便演示可以加两个 a 标签来做路由跳转

Step 7 启动项目

最后我们通过 webpack-dev-server 的方式启动项目，就可以看到最终的效果了