极速搭建一个 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,以便主应用可以加载部署在不同服务器上的子应用。

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

** 示例代码仓库 **

相关推荐
T^T尚2 小时前
uniapp H5上传图片前压缩
前端·javascript·uni-app
出逃日志3 小时前
JS的DOM操作和事件监听综合练习 (具备三种功能的轮播图案例)
开发语言·前端·javascript
XIE3923 小时前
如何开发一个脚手架
前端·javascript·git·npm·node.js·github
GISer_Jing3 小时前
React渲染相关内容——渲染流程API、Fragment、渲染相关底层API
javascript·react.js·ecmascript
山猪打不过家猪3 小时前
React(五)——useContecxt/Reducer/useCallback/useRef/React.memo/useMemo
前端·javascript·react.js
前端青山3 小时前
React事件处理机制详解
开发语言·前端·javascript·react.js
科技D人生3 小时前
Vue.js 学习总结(14)—— Vue3 为什么推荐使用 ref 而不是 reactive
前端·vue.js·vue ref·vue ref 响应式·vue reactive
对卦卦上心3 小时前
React-useEffect的使用
前端·javascript·react.js
练习两年半的工程师3 小时前
React的基本知识:事件监听器、Props和State的区分、改变state的方法、使用回调函数改变state、使用三元运算符改变state
前端·javascript·react.js
啵咿傲3 小时前
在React中实践一些软件设计思想 ✅
前端·react.js·前端框架