Module Federation 如何支持多团队协作？有哪些协作最佳实践？ - 面试题

Module Federation 的多团队协作模式需要建立清晰的规范和流程，以下是详细的协作方案：

1. 团队组织架构

跨团队协作模型：

shell
┌─────────────────────────────────────────────┐
│          平台团队 (Platform Team)            │
│  - Module Federation 基础设施                │
│  - 共享依赖管理                              │
│  - CI/CD 管道                                │
│  - 代码规范制定                              │
└──────────────┬──────────────────────────────┘
               │
    ┌──────────┼──────────┬──────────┐
    │          │          │          │
┌───▼───┐ ┌───▼───┐ ┌───▼───┐ ┌───▼───┐
│订单团队│ │用户团队│ │支付团队│ │商品团队│
└───────┘ └───────┘ └───────┘ └───────┘

2. 代码规范和约定

模块命名规范：

javascript
// 命名约定：{team}-{module}-{type}
// 例如：order-list-component, user-api-service

// 模块配置示例
new ModuleFederationPlugin({
  name: 'order-list-component',
  filename: 'remoteEntry.js',
  exposes: {
    './OrderList': './src/components/OrderList',
    './OrderListAPI': './src/api/orderList'
  },
  shared: {
    react: { singleton: true },
    'react-dom': { singleton: true }
  }
})

目录结构规范：

shell
packages/
├── order-list-component/
│   ├── src/
│   │   ├── components/
│   │   │   ├── OrderList.tsx
│   │   │   └── OrderItem.tsx
│   │   ├── api/
│   │   │   └── orderList.ts
│   │   ├── hooks/
│   │   │   └── useOrderList.ts
│   │   ├── types/
│   │   │   └── order.ts
│   │   └── index.ts
│   ├── package.json
│   ├── webpack.config.js
│   └── README.md
├── user-profile-component/
│   └── ...
└── shared-dependencies/
    └── ...

3. API 设计规范

统一的 API 接口：

typescript
// types/api.ts
export interface ApiResponse<T> {
  data: T
  code: number
  message: string
}

export interface PaginationParams {
  page: number
  pageSize: number
}

export interface PaginatedResponse<T> extends ApiResponse<T[]> {
  total: number
  page: number
  pageSize: number
}

// 订单模块 API
export interface OrderListParams extends PaginationParams {
  status?: string
  startDate?: string
  endDate?: string
}

export interface Order {
  id: string
  orderNo: string
  status: string
  amount: number
  createdAt: string
}

export const orderAPI = {
  getList: (params: OrderListParams): Promise<PaginatedResponse<Order>> => {
    return request.get('/orders', { params })
  },
  getDetail: (id: string): Promise<ApiResponse<Order>> => {
    return request.get(`/orders/${id}`)
  }
}

4. 版本管理策略

语义化版本控制：

json
{
  "name": "order-list-component",
  "version": "1.2.3",
  "description": "Order list component with filtering and pagination",
  "main": "index.js",
  "peerDependencies": {
    "react": "^17.0.0",
    "react-dom": "^17.0.0"
  },
  "dependencies": {
    "@company/shared-types": "^1.0.0"
  }
}

版本兼容性矩阵：

javascript
// version-matrix.js
const versionMatrix = {
  'order-list-component': {
    '1.x': {
      compatibleHost: ['>=1.0.0'],
      breakingChanges: []
    },
    '2.0.0': {
      compatibleHost: ['>=2.0.0'],
      breakingChanges: [
        'Removed deprecated API methods',
        'Changed component props interface'
      ]
    }
  }
}

export function checkCompatibility(moduleName, moduleVersion, hostVersion) {
  const moduleInfo = versionMatrix[moduleName]
  if (!moduleInfo) return true

  const majorVersion = moduleVersion.split('.')[0]
  const versionInfo = moduleInfo[`${majorVersion}.x`] || moduleInfo[majorVersion]
  
  if (!versionInfo) return false

  return versionInfo.compatibleHost.some(range => 
    semver.satisfies(hostVersion, range)
  )
}

5. 文档规范

模块文档模板：

markdown
# Order List Component

## 概述
订单列表组件，支持筛选、分页、排序等功能。

## 安装
\`\`\`bash
npm install @company/order-list-component
\`\`\`

## 使用方法
\`\`\`jsx
import OrderList from '@company/order-list-component'

function App() {
  return (
    <OrderList
      status="pending"
      onOrderClick={(order) => console.log(order)}
    />
  )
}
\`\`\`

## API 文档

### Props
| 属性 | 类型 | 必填 | 默认值 | 说明 |
|------|------|------|--------|------|
| status | string | 否 | 'all' | 订单状态筛选 |
| pageSize | number | 否 | 20 | 每页显示数量 |
| onOrderClick | function | 否 | - | 订单点击回调 |

### Events
| 事件名 | 参数 | 说明 |
|--------|------|------|
| orderClick | order: Order | 订单点击事件 |
| pageChange | page: number | 页码变化事件 |

## 版本历史
- 1.2.3 (2024-01-15): 修复分页bug
- 1.2.0 (2024-01-10): 新增排序功能
- 1.0.0 (2024-01-01): 初始版本

## 贡献者
- 订单团队: order-team@company.com

6. CI/CD 流程

自动化构建和部署：

yaml
# .github/workflows/build-and-deploy.yml
name: Build and Deploy

on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    
    steps:
      - uses: actions/checkout@v2
      
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '16'
          
      - name: Install dependencies
        run: npm ci
        
      - name: Run linter
        run: npm run lint
        
      - name: Run tests
        run: npm test
        
      - name: Build
        run: npm run build
        
      - name: Upload artifacts
        uses: actions/upload-artifact@v2
        with:
          name: dist
          path: dist/
          
  deploy:
    needs: build
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'
    
    steps:
      - name: Download artifacts
        uses: actions/download-artifact@v2
        with:
          name: dist
          
      - name: Deploy to S3
        uses: jakejarvis/s3-sync-action@master
        with:
          args: --delete
        env:
          AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          SOURCE_DIR: 'dist'

7. 代码审查流程

Pull Request 模板：

markdown
## 变更类型
- [ ] 新功能
- [ ] Bug 修复
- [ ] 性能优化
- [ ] 文档更新
- [ ] 代码重构

## 变更描述
简要描述本次变更的内容和目的。

## 影响范围
- [ ] 仅影响当前模块
- [ ] 影响其他模块（请列出）
- [ ] 影响主应用

## 测试情况
- [ ] 单元测试已通过
- [ ] 集成测试已通过
- [ ] 手动测试已完成

## 文档更新
- [ ] README 已更新
- [ ] API 文档已更新
- [ ] 变更日志已更新

## 检查清单
- [ ] 代码符合团队规范
- [ ] 没有引入新的依赖（或已说明原因）
- [ ] 版本号已更新（如有破坏性变更）
- [ ] 向后兼容性已考虑

8. 依赖管理

共享依赖管理：

javascript
// packages/shared-dependencies/package.json
{
  "name": "@company/shared-dependencies",
  "version": "1.0.0",
  "main": "index.js",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.0.0",
    "styled-components": "^5.3.0",
    "axios": "^0.27.0"
  }
}

// 使用共享依赖
new ModuleFederationPlugin({
  name: 'order-list-component',
  shared: {
    ...require('@company/shared-dependencies')
  }
})

9. 沟通机制

团队沟通渠道：

Slack 频道: #module-federation, #order-team, #user-team
定期会议: 每周技术同步会
文档中心: Confluence 或 Notion
问题追踪: Jira 或 GitHub Issues

变更通知机制：

javascript
// 变更通知服务
class ChangeNotificationService {
  constructor() {
    this.subscribers = new Map()
  }

  subscribe(moduleName, callback) {
    if (!this.subscribers.has(moduleName)) {
      this.subscribers.set(moduleName, [])
    }
    this.subscribers.get(moduleName).push(callback)
  }

  notify(moduleName, change) {
    const callbacks = this.subscribers.get(moduleName) || []
    callbacks.forEach(callback => callback(change))
    
    // 发送通知到 Slack
    this.sendSlackNotification(moduleName, change)
  }

  sendSlackNotification(moduleName, change) {
    const webhookUrl = process.env.SLACK_WEBHOOK_URL
    const message = {
      text: `Module ${moduleName} has been updated`,
      attachments: [{
        color: 'good',
        fields: [
          { title: 'Version', value: change.version, short: true },
          { title: 'Type', value: change.type, short: true },
          { title: 'Description', value: change.description, short: false }
        ]
      }]
    }
    
    fetch(webhookUrl, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(message)
    })
  }
}

export const changeNotificationService = new ChangeNotificationService()

通过以上协作模式，可以建立高效的 Module Federation 多团队协作体系。