基于 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