使用 Single-SPA 从零开始搭建 React 微前端项目
在这篇博客中，我们将探讨如何使用Single-SPA从零开始搭建一个React微前端项目，该项目将包含三个不同的子应用。我们将使用Webpack包管理工具和yarn来管理依赖关系，并使用Single-SPA技术来集成和协调不同的子应用。
什么是微前端？
在传统的前端开发中，通常使用单一的前端框架来构建整个应用程序。这意味着我们必须在同一个代码库中维护整个应用程序的代码，并且所有的功能都必须一起部署。然而，随着应用程序变得越来越复杂，这种方法变得越来越难以维护。
微前端是一种新兴的前端开发架构，它通过将应用程序拆分为多个独立的子应用来解决这个问题。每个子应用都可以使用不同的前端框架或技术栈来开发，这些子应用可以单独构建、部署和维护。最终，这些子应用将组合在一起，以创建一个完整的应用程序。
Single-SPA简介
Single-SPA是一种用于构建微前端应用程序的JavaScript框架。它允许你将多个独立的子应用程序集成到一个统一的应用程序中。每个子应用程序可以使用不同的框架或技术栈来开发，并且可以独立构建、部署和维护。
Single-SPA提供了一个应用程序生命周期钩子，使得在不同的子应用之间切换变得容易。它还提供了一些常用的功能，例如路由和事件总线，以帮助你构建更加复杂的微前端应用程序。
准备工作
在开始之前，请确保您已经安装了以下软件：
Node.js
npm 或 yarn
webpack
此外，还需要创建一个新的目录来存储我们的项目。打开终端并执行以下命令
mkdir react-microfrontend
cd react-microfrontend现在我们已经准备好开始构建React微前端项目了！
步骤一：创建主应用程序
第一步是创建一个主应用程序，它将作为我们微前端应用程序的入口点。使用Create React App来创建我们的主应用程序。打开终端并执行以下命令：
npx create-react-app main-app
cd main-app现在我们已经创建了一个名为main-app的主应用程序。可以启动开发服务器并查看它是否可以正常工作。在终端中输入以下命令启动开发服务器：
yarn start在浏览器中打开http://localhost:3000，你应该能够看到一个React应用程序的欢迎页面。
接下来需要将Single-SPA集成到我们的主应用程序中。为此，需要安装Single-SPA和相关依赖项。在终端中执行以下命令：
yarn add single-spa single-spa-react react-router-dom现在我们已经安装了Single-SPA React包。接下来，需要将React应用程序转换为Single-SPA应用程序。创建一个名为“root-config”的新文件夹，其中包含Single-SPA配置文件。
mkdir root-config
cd root-config
touch index.js在“index.js”文件中，需要引入Single-SPA并将我们的React应用程序转换为Single-SPA应用程序。这是一个例子：
import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';
import App from '../src/App';
const reactLifecycles = singleSpaReact({
React,
ReactDOM,
rootComponent: App,
domElementGetter: () => document.getElementById('root'),
});
export const bootstrap = [
reactLifecycles.bootstrap,
];
export const mount = [
reactLifecycles.mount,
];
export const unmount = [
reactLifecycles.unmount,
];上述代码引入了Single-SPA并将我们的React应用程序转换为Single-SPA应用程序。还为我们的应用程序定义了生命周期方法：bootstrap，mount和unmount。
步骤二：创建子应用程序
接下来，我们将创建三个子应用程序，每个子应用程序都将使用不同的React组件。使用Create React App来创建我们的子应用程序。在终端中执行以下命令：
npx create-react-app subapp1
npx create-react-app subapp2
npx create-react-app subapp3现在我们已经创建了三个名为subapp1、subapp2和subapp3的子应用程序。
分别进入这些目录并启动开发服务器：
cd subapp1
yarn startcd subapp2
yarn startcd subapp3
yarn start在浏览器中打开http://localhost:3001，http://localhost:3002和http://localhost:3003，你应该能够看到三个React应用程序的欢迎页面。
现在需要将Single-SPA集成到我们的子应用程序中。为此，我们将安装Single-SPA和相关依赖项。在终端中依次进入每个子应用程序目录，并执行以下命令：
yarn add single-spa single-spa-react在每个子应用程序的根目录中，创建一个名为“single-spa-config”的新文件夹，并在其中创建一个名为“index.js”的新文件。
mkdir single-spa-config
cd single-spa-config
touch index.js在“index.js”文件中，我们需要导出子应用程序的生命周期方法。以下是一个例子：
import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';
import App from '../src/App';
const reactLifecycles = singleSpaReact({
React,
ReactDOM,
rootComponent: App,
});
export const bootstrap = [
reactLifecycles.bootstrap,
];
export const mount = [
reactLifecycles.mount,
];
export const unmount = [
reactLifecycles.unmount,
];这将导出子应用程序的生命周期方法，我们稍后将在主配置文件中使用它们。
重复以上步骤，将“single-spa-config”文件夹添加到每个子应用程序中。
步骤三：配置Webpack
接下来，我们需要配置Webpack来使我们的项目可以处理Single-SPA应用程序。
在项目根目录中创建一个名为“webpack.config.js”的新文件。在该文件中，需要配置Webpack来使用Single-SPA并处理子应用程序。
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.resolve(__dirname, 'root-config', 'index.js'),
output: {
filename: 'root-config.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
],
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'public', 'index.html'),
}),
],
devServer: {
historyApiFallback: true,
},
devtool: 'source-map',
externals: [],
resolve: {
modules: [__dirname, 'node_modules'],
alias: {
'react': path.resolve(__dirname, 'node_modules', 'react'),
'react-dom': path.resolve(__dirname, 'node_modules', 'react-dom'),
},
extensions: ['.js', '.jsx', '.scss'],
},
};上述代码中，我们定义了Webpack配置文件。我们定义了入口文件和输出路径，配置了Babel处理JavaScript文件，定义了一些插件和devServer选项。我们还配置了externals和resolve属性，以便我们的应用程序可以在运行时动态加载。
第四步：配置主应用程序
现在，我们需要在主应用程序中使用所有子应用程序的Single-SPA。打开“index.js”文件并添加以下代码：
import { registerApplication, start } from 'single-spa';
registerApplication(
'subapp1',
() => import('./subapp1/single-spa-config'),
() => location.pathname.startsWith('/subapp1')
);
registerApplication(
'subapp2',
() => import('./subapp2/single-spa-config'),
() => location.pathname.startsWith('/subapp2')
);
registerApplication(
'subapp3',
() => import('./subapp3/single-spa-config'),
() => location.pathname.startsWith('/subapp3')
);
start();
上述代码中，我们使用registerApplication方法注册了所有子应用程序，并定义了它们的URL路径。我们还调用了start方法以启动Single-SPA应用程序。
第五步：运行应用程序
现在，我们已经准备好启动我们的应用程序。在终端中输入以下命令：
yarn start这将启动Webpack Dev Server并在浏览器中打开应用程序。
现在，你可以访问http://localhost:3000并浏览React微前端应用程序！
结论
在本博客中，我们介绍了如何使用Single-SPA从零开始搭建拥有三个不同子应用的React微前端项目。我们使用Webpack包管理工具，Yarn和Single-SPA技术来构建整个应用程序。我们还讨论了如何在主应用程序中注册子应用程序，并使用Single-SPA方法来启动整个应用程序。希望这篇博客对你有所帮助，感谢阅读！