一个常常被忽略的 single-spa 微前端实践

2024-01-25 00:57:58

引言

微前端的概念近几年逐渐成为业界关注的焦点，而 single-spa 作为微前端架构中的佼佼者，因其轻量级、灵活性强等特点而备受青睐。然而，对于许多开发者而言，single-spa 的实际应用场景和最佳实践往往存在一些困惑。本文旨在通过一个深入浅出的示例，详细阐述 single-spa 的应用，为开发者提供一份实用的参考指南。

single-spa 简介

single-spa 是一种 JavaScript 框架，用于在单个 Web 应用程序中集成多个独立应用程序（称为微前端）。它允许开发人员将不同的应用程序模块化，并独立于主应用程序进行开发和部署。通过 single-spa，可以实现跨团队协作、代码复用和更快的开发迭代。

示例应用

为了便于理解，我们创建一个简单的示例应用，展示如何在 single-spa 中集成两个微前端：一个显示商品列表的微前端，以及一个显示购物车详情的微前端。

构建微前端

首先，我们需要为这两个微前端创建单独的项目：

mkdir products-app && cd products-app
npx create-react-app .
cd ..
mkdir cart-app && cd cart-app
npx create-react-app .

然后，为每个微前端安装 single-spa 插件：

cd products-app
npm install --save single-spa-react
cd ../cart-app
npm install --save single-spa-react

接下来，在每个微前端的 index.js 文件中，配置 single-spa 应用程序：

// products-app/index.js
import { registerApplication } from 'single-spa';
registerApplication({
  name: 'products',
  app: () => System.import('products-app'),
  activeWhen: ['/'],
});

// cart-app/index.js
import { registerApplication } from 'single-spa';
registerApplication({
  name: 'cart',
  app: () => System.import('cart-app'),
  activeWhen: ['/cart'],
});

集成到主应用程序

最后，我们需要在主应用程序中集成这些微前端。为此，我们在主应用程序的 index.html 文件中添加以下代码：

<body>
  <div id="products"></div>
  <div id="cart"></div>
  <script src="single-spa.js"></script>
  <script>
    System.import('main-app').then((main) => {
      main.start();
    });
  </script>
</body>