极速搭建一个 SingleSPA 主子应用

基于 SingleSPA 6.x 版本，创建微前端主子应用。

下面是一个基本的步骤指南和代码示例来帮助你开始。

安装依赖

首先，你需要安装 single-spa 及其相关依赖。对于 React 和 TypeScript，你需要安装对应的包。

主应用

创建一个新的项目作为主应用。
安装 single-spa 相关依赖。

lua 复制代码

1npx create-single-spa

选择 root-config 和 react-typescript 选项。

在生成的主应用项目里，配置加载子应用的代码。

src/root-config.ts

tsx 复制代码

import { registerApplication, start } from 'single-spa';

registerApplication({
  name: '@orgname/react-single-spa-child',
  app: () => System.import('@orgname/react-single-spa-child'),
  activeWhen: (location) => location.pathname.startsWith('/childapp')
});

start({
  urlRerouteOnly: true,
});

子应用

创建一个新的项目作为子应用。
安装 single-spa 相关依赖。

lua 复制代码

npx create-single-spa

选择 single-spa application/project 和 react-typescript 选项。

在生成的子应用项目中，配置子应用相关代码。

src/orgname-react-single-spa-child.tsx

tsx 复制代码

import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';
import Root from './root.component';

const lifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: Root,
  errorBoundary(err, info, props) {
    // Customize the root error boundary for your microfrontend here.
    return <div>Error</div>;
  },
});

export const { bootstrap, mount, unmount } = lifecycles;

src/root.component.tsx

tsx 复制代码

import React from 'react';

export default function Root(props) {
  return <section>{props.name} is mounted!</section>;
}

确保子应用的 webpack 配置是正确的，允许它被主应用作为模块加载。

webpack.config.js

确保你有如下配置：

css 复制代码

output: {
  library: '@orgname/react-single-spa-child',
  libraryTarget: 'umd',
  ...
},

配置 import map。

主应用需要知道如何加载子应用，这通常通过 import map 来完成。你可以在主应用的 index.html 中添加一个 import map 来指定子应用的加载路径。

index.html

tsx 复制代码

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

本地开发和测试

运行子应用的开发服务器（根据你的配置可能是 npm start）。
运行主应用的开发服务器，并确保它能够加载子应用。主应用通常运行在不同的端口上。

这个代码示例展示了一个非常基础的主应用和子应用的加载过程。生产环境部署时，你需要确保正确设置 CORS，以便主应用可以加载部署在不同服务器上的子应用。

请注意，由于环境和配置的不同，你可能需要根据实际情况调整上面的代码和步骤。

** 示例代码仓库 **

主应用：github.com/korbinzhao/... 启动方式：npm start
子应用：github.com/korbinzhao/... 启动方式: npm start:standalone