基于single-spa拆分微UI应用：独立构建可行性及实现方案咨询

作为用single-spa落地过多个微前端项目的开发者，我可以明确告诉你：把各个应用拆分到不同磁盘、实现独立构建完全没问题，甚至这就是微前端架构设计的初衷之一——让子应用各自独立迭代，不用牵一发而动全身。下面给你一步步拆解实现方案：

一、先理清核心逻辑 #

single-spa的本质是通过注册子应用的方式来集成，每个子应用都是独立的模块（可以是React、Vue甚至原生JS）。只要根应用能访问到子应用的构建产物（本地开发用端口地址，生产用CDN/静态资源地址），就能实现独立开发、构建和部署。

二、具体落地步骤 #

1. 拆分项目到不同磁盘 #

首先把你的三个应用彻底分开，每个应用拥有独立的项目目录和配置文件：

• 根应用放到C盘：C:\single-spa-root
• React子应用1放到D盘：D:\react-app-one
• React子应用2放到E盘：E:\react-app-two

每个项目都要复制原有的package.json、webpack.config.js、babel.config.js，然后根据各自的角色做微调：

• 子应用需要安装single-spa-react依赖，根应用需要安装single-spa依赖；
• 子应用的webpack要配置成umd格式（方便被systemjs加载），根应用则不需要这个配置。

2. 配置子应用的构建规则 #

这是关键步骤，每个React子应用的webpack必须做如下调整，确保产物能被single-spa识别：
在webpack.config.js的output节点添加：

output: {
  filename: '[name].[contenthash].js',
  library: 'ReactAppOne', // 每个子应用取唯一的名字，不能重复
  libraryTarget: 'umd', // 输出umd格式，支持多种加载方式
  publicPath: 'http://localhost:3001/' // 开发环境下子应用的访问地址，生产换成实际部署地址
}

同时，子应用的入口文件要导出single-spa要求的生命周期函数（bootstrap、mount、unmount），示例代码：

import React from 'react';
import ReactDOM from 'react-dom/client';
import singleSpaReact from 'single-spa-react';
import App from './App';

const domElementGetter = () => {
  // 确保根应用里有对应的容器节点
  let container = document.getElementById('react-app-one-container');
  if (!container) {
    container = document.createElement('div');
    container.id = 'react-app-one-container';
    document.body.appendChild(container);
  }
  return container;
};

const lifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: App,
  domElementGetter,
});

// 导出生命周期函数，供single-spa调用
export const { bootstrap, mount, unmount } = lifecycles;

3. 配置根应用的子应用注册 #

根应用的核心是注册各个子应用，修改根应用的入口文件（比如src/index.js）：

import { registerApplication, start } from 'single-spa';

// 注册第一个React子应用
registerApplication({
  name: '@my-team/react-app-one',
  // 开发环境加载子应用的开发服务器地址，生产换成CDN地址
  app: () => System.import('http://localhost:3001/main.js'),
  // 指定触发子应用挂载的路由规则
  activeWhen: (location) => location.pathname.startsWith('/app-one'),
});

// 注册第二个React子应用
registerApplication({
  name: '@my-team/react-app-two',
  app: () => System.import('http://localhost:3002/main.js'),
  activeWhen: (location) => location.pathname.startsWith('/app-two'),
});

// 启动single-spa
start({
  urlRerouteOnly: true,
});

另外，根应用需要用systemjs来加载子应用，所以要在根应用的public/index.html里引入systemjs：

<!-- 引入systemjs，用于加载子应用 -->
<script src="https://cdn.jsdelivr.net/npm/systemjs@6.14.0/dist/system.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/systemjs@6.14.0/dist/extras/amd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/systemjs@6.14.0/dist/extras/named-exports.min.js"></script>

4. 实现独立构建与运行 #

现在每个应用都可以完全独立操作了：

• 启动React子应用1：进入D:\react-app-one，运行npm start，它会在3001端口启动开发服务器；
• 启动React子应用2：进入E:\react-app-two，运行npm start，它会在3002端口启动开发服务器；
• 启动根应用：进入C:\single-spa-root，运行npm start，它会在自己的端口（比如8080）启动，访问后就能根据路由加载对应的子应用。

修改某个子应用时，只需要在该应用目录下运行npm run build（开发模式下webpack会自动热更新，不用手动构建），完全不需要碰其他应用的代码或构建命令。

5. 生产环境部署建议 #

生产环境中，你可以把每个子应用的构建产物部署到独立的静态资源服务器（或者同一个服务器的不同路径），然后把根应用里的子应用注册地址换成生产环境的地址，比如：

app: () => System.import('https://static.example.com/react-app-one/main.js')

三、常见坑点提醒 #

• 子应用的publicPath必须正确，否则根应用加载不到子应用的资源；
• 每个子应用的library名字必须唯一，避免命名冲突；
• 开发时要确保各个应用的端口不重复，根应用、子应用1、子应用2最好用不同的端口；
• 子应用的dom容器要确保在根应用中存在，或者像示例代码那样动态创建，避免挂载失败。

内容的提问来源于stack exchange，提问作者Дмитрий Богданов