Как сделать модульное приложение на Vue чтобы его разрабатывали две команды?

Архитектура модульного Vue-приложения для нескольких команд

Для создания модульного Vue-приложения, разрабатываемого двумя независимыми командами, необходимо внедрить микрофронтенд-подход или монорепозиторий с четким разделением ответственности. Вот ключевые стратегии и технические реализации:

1. Выбор архитектурного подхода

Микрофронтенды через Module Federation

Использование Webpack Module Federation (или Vite-плагинов) позволяет разделить приложение на независимые сборки:

• Каждая команда разрабатывает свой remote-модуль
• Хост-приложение динамически подгружает модули в runtime
• Полная изоляция зависимостей и сборок

// Конфигурация Module Federation для команды А
// webpack.config.js команды А
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'teamA',
      filename: 'remoteEntry.js',
      exposes: {
        './ProductModule': './src/components/ProductModule.vue'
      },
      shared: {
        vue: { singleton: true },
        vuex: { singleton: true },
        'vue-router': { singleton: true }
      }
    })
  ]
}

// Хост-приложение подгружает модуль команды А
const ProductModule = () => import('teamA/ProductModule')

export default {
  components: { ProductModule },
  template: `<ProductModule />`
}

Монорепозиторий с Nx или Lerna

Структура монорепозитория с инструментами управления:

app/
├── packages/
│   ├── team-a-module/    # Команда А
│   │   ├── src/
│   │   ├── package.json
│   │   └── vite.config.js
│   ├── team-b-module/    # Команда В
│   │   ├── src/
│   │   ├── package.json
│   │   └── vite.config.js
│   └── shell/            # Основное приложение
│       ├── src/
│       └── package.json
├── package.json
└── nx.json               # Конфигурация Nx

2. Организация коммуникации между модулями

Event Bus через Vue 3 Composition API

// shared/eventBus.ts
type EventCallback = (payload: any) => void

export const createEventBus = () => {
  const listeners = new Map<string, EventCallback[]>()
  
  return {
    emit(event: string, payload?: any) {
      listeners.get(event)?.forEach(cb => cb(payload))
    },
    on(event: string, callback: EventCallback) {
      if (!listeners.has(event)) listeners.set(event, [])
      listeners.get(event)!.push(callback)
    },
    off(event: string, callback: EventCallback) {
      const callbacks = listeners.get(event)
      if (callbacks) {
        listeners.set(event, 
          callbacks.filter(cb => cb !== callback)
        )
      }
    }
  }
}

// Экспортируем глобальный Event Bus
export const globalEventBus = createEventBus()

Shared State Management

// shared/store/modulesRegistry.ts
import { reactive, readonly } from 'vue'

interface ModuleState {
  [moduleName: string]: any
}

class ModuleRegistry {
  private states: ModuleState = reactive({})
  
  registerModule(moduleName: string, initialState: any) {
    if (!this.states[moduleName]) {
      this.states[moduleName] = reactive(initialState)
    }
    return readonly(this.states[moduleName])
  }
  
  getModuleState(moduleName: string) {
    return readonly(this.states[moduleName] || {})
  }
}

export const moduleRegistry = new ModuleRegistry()

3. Соглашения и контракты между командами

API-контракты для межмодульного взаимодействия

// contracts/userContract.ts
export interface UserModuleAPI {
  getUserProfile(): Promise<UserProfile>
  updateUserSettings(settings: UserSettings): Promise<void>
}

// contracts/productContract.ts  
export interface ProductModuleAPI {
  loadProducts(filters: ProductFilters): Promise<Product[]>
  addToCart(productId: string): Promise<void>
}

Shared Component Contracts

<!-- shared/components/BaseModal.vue -->
<template>
  <div v-if="isOpen" class="modal">
    <slot :close="closeModal"></slot>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  isOpen: boolean
}>()

const emit = defineEmits<{
  close: []
}>()

const closeModal = () => emit('close')
</script>

4. Инфраструктура и DevOps

Независимые пайплайны сборки

• Каждая команда настраивает свой CI/CD пайплайн
• Артефакты сборки публикуются в артефаккт-репозиторий (npm registry, AWS S3)
• Хост-приложение загружает определенные версии модулей

Versioning Strategy

{
  "name": "@company/team-a-module",
  "version": "1.2.0",
  "dependencies": {
    "@company/shared-components": "^2.0.0"
  }
}

5. Практические рекомендации

• Создайте shared-пакет с общими утилитами, типами и компонентами
• Внедрите Storybook для документации UI-компонентов
• Используйте TypeScript для жестких контрактов между модулями
• Настройте прекоммит-хуки с линтингом и тестами
• Создайте общую библиотеку UI-китов (Button, Input, Modal)
• Договоритесь о правилах именования событий и методов
• Ведите общую документацию в Wiki или Storybook

# Структура package.json для shared библиотеки
{
  "name": "@company/shared",
  "exports": {
    "./styles": "./dist/styles.css",
    "./components": "./dist/components.js",
    "./utils": "./dist/utils.js",
    "./types": "./dist/types.d.ts"
  }
}

6. Тестирование и качество кода

• Интеграционные тесты для проверки взаимодействия модулей
• Contract testing с помощью Pact.js
• End-to-end тесты для критических пользовательских сценариев
• Общие линтеры и правила форматирования (.eslintrc, .prettierrc)

Ключевой принцип: максимальная изоляция команд с минимальным количеством четко определенных точек взаимодействия. Используйте семантическое версионирование для shared-пакетов и устанавливайте SLI/SLA для API между модулями. Регулярно проводите синхронизационные встречи для обсуждения контрактов и архитектурных решений.