极速搭建一个 SingleSPA 主子应用

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

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

安装依赖

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

主应用

  1. 创建一个新的项目作为主应用。
  2. 安装 single-spa 相关依赖。
lua 复制代码
1npx create-single-spa

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

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

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,
});

子应用

  1. 创建一个新的项目作为子应用。
  2. 安装 single-spa 相关依赖。
lua 复制代码
npx create-single-spa

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

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

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>;
}
  1. 确保子应用的 webpack 配置是正确的,允许它被主应用作为模块加载。

webpack.config.js

确保你有如下配置:

css 复制代码
output: {
  library: '@orgname/react-single-spa-child',
  libraryTarget: 'umd',
  ...
},
  1. 配置 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>

本地开发和测试

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

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

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

** 示例代码仓库 **

相关推荐
GIS程序媛—椰子1 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_0011 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端1 小时前
Content Security Policy (CSP)
前端·javascript·面试
木舟10091 小时前
ffmpeg重复回听音频流,时长叠加问题
前端
王大锤43911 小时前
golang通用后台管理系统07(后台与若依前端对接)
开发语言·前端·golang
我血条子呢2 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
黎金安2 小时前
前端第二次作业
前端·css·css3
啦啦右一2 小时前
前端 | MYTED单篇TED词汇学习功能优化
前端·学习
半开半落2 小时前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt