微前端方案落地（SystemJS, pnpm, Immer）

随着前端应用逐渐变得复杂，微前端（Micro Frontends）作为一种新兴架构，提供了一种解决方案。它将前端应用拆分为多个独立的子应用，允许团队独立开发、部署和维护各自的功能模块。微前端的落地方案众多，其中使用 SystemJS 作为模块加载器，pnpm 作为包管理工具，Immer 作为状态管理辅助工具，能够帮助团队更高效地实现微前端架构。

一、微前端架构概述

在微前端架构中，整个应用被拆解为多个 独立的小应用，每个子应用都有自己独立的生命周期、状态管理和路由。这些子应用通过共享协议（如 URL 路由、事件总线等）进行通信，并通过容器应用（也称为“主应用”）进行协调。

微前端的优势：

独立开发：每个团队可以独立开发自己的子应用，减少相互依赖。
独立部署：每个子应用可以独立部署，不影响其他模块的更新。
技术栈隔离：不同的子应用可以使用不同的技术栈。

二、系统架构设计

在本项目中，我们将使用以下三种工具来实现微前端方案：

SystemJS：用于加载和运行独立的子应用模块。
pnpm：一种高效的包管理工具，用于管理项目的依赖。
Immer：用于简化不可变数据的操作，管理微前端应用中的状态。

项目结构

microfrontend-project
├── container-app      // 主应用（容器应用）
│   ├── src
│   ├── index.html
│   └── main.js
├── subapp1            // 子应用1
│   ├── src
│   └── index.js
├── subapp2            // 子应用2
│   ├── src
│   └── index.js
├── package.json
└── pnpm-lock.yaml

1. 安装 pnpm

首先，确保安装了 pnpm 作为包管理工具。你可以通过以下命令安装 pnpm：

npm install -g pnpm

2. 创建容器应用

容器应用是微前端架构的核心，它负责加载并管理多个子应用。我们使用 SystemJS 来动态加载子应用。

在 container-app 目录下，初始化一个新的 Vue 项目（也可以使用 React、Angular 等框架）：

pnpm create vue@latest container-app
cd container-app

3. 安装 SystemJS 和 Immer

在主应用中，我们需要安装 SystemJS 和 Immer：

pnpm add systemjs immer

4. 配置 SystemJS 加载子应用

在 container-app/src/main.js 中，配置 SystemJS 动态加载子应用：

import * as System from 'systemjs';

// 配置子应用的加载路径
System.config({
    
    
  baseURL: '/subapps', // 设置子应用的路径
  paths: {
    
    
    'subapp1': '/subapps/subapp1/index.js',
    'subapp2': '/subapps/subapp2/index.js'
  }
});

// 动态加载子应用1
System.import('subapp1').then((module) => {
    
    
  // 初始化子应用1
  const app1 = module.default();
  document.getElementById('subapp1').appendChild(app1);
}).catch(err => console.error('加载子应用1失败', err));

// 动态加载子应用2
System.import('subapp2').then((module) => {
    
    
  // 初始化子应用2
  const app2 = module.default();
  document.getElementById('subapp2').appendChild(app2);
}).catch(err => console.error('加载子应用2失败', err));

5. 子应用开发

每个子应用都可以是一个独立的模块。以 subapp1 为例，我们在 subapp1/src/index.js 中构建子应用：

import {
    
     produce } from 'immer';

// 初始化状态
let state = {
    
    
  message: 'Hello from SubApp 1'
};

// 使用 Immer 管理状态
const updatedState = produce(state, draft => {
    
    
  draft.message = 'Hello from updated SubApp 1';
});

// 创建一个简单的 DOM 元素
export default function () {
    
    
  const element = document.createElement('div');
  element.textContent = updatedState.message;
  return element;
}

6. 子应用1的安装和配置

在 subapp1 项目中，我们使用 pnpm 初始化并安装相关依赖：

pnpm init
pnpm add immer

通过类似的方式配置其他子应用（如 subapp2）。每个子应用都可以独立开发，包含自己的 HTML、CSS 和 JavaScript 文件。

7. 主应用 HTML 文件

在主应用的 index.html 中，我们为每个子应用预留出容器，SystemJS 会将子应用的 DOM 渲染到这些容器中：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Micro Frontend - Container App</title>
</head>
<body>
  <div id="subapp1"></div>
  <div id="subapp2"></div>
  <script src="/node_modules/systemjs/dist/s.js"></script>
  <script src="/src/main.js"></script>
</body>
</html>

8. 启动容器应用和子应用

使用以下命令启动主应用和子应用：

启动主应用：
```
pnpm run dev
```
启动子应用（分别在各个子应用目录中启动）：
```
pnpm run dev
```

子应用将会被动态加载并渲染在容器应用的对应位置。

三、总结

通过本教程，我们实现了一个基于 SystemJS 的微前端方案，使用 pnpm 来高效管理依赖，利用 Immer 进行不可变状态管理。该方案将前端应用拆分为多个独立的子应用，允许团队在各自的子应用中使用不同的技术栈，并且可以独立部署。

通过这种方式，微前端可以提升大型前端应用的开发效率，降低维护难度，实现高效的模块化开发。