Vue Academy · Урок

Плагин федерации Vite

@originjs/vite-plugin-federation, настройка производителя и потребителя и динамический импорт удалённых модулей

Урок 3 из 413 шагов

«Плагин федерации Vite» — бесплатный урок Vue Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Федерация в Vite

Module Federation появился в Webpack, но многие приложения Vue используют Vite. Плагин сообщества @originjs/vite-plugin-federation добавляет федерацию в приложения-поставщики и приложения-потребители на основе Vite.

Установка плагина

Добавьте плагин и в приложение-поставщик (удаленное приложение), и в приложение-потребитель (хост).

// terminal
// npm install -D @originjs/vite-plugin-federation

Конфигурация поставщика

В поставщике (удаленном приложении), в файле vite.config.ts, добавьте federation с параметром name и объектом exposes, сопоставляющим публичные имена с локальными файлами.

import federation from "@originjs/vite-plugin-federation"

export default {
  plugins: [
    federation({
      name: "remote_app",
      filename: "remoteEntry.js",
      exposes: {
        "./Widget": "./src/components/Widget.vue",
      },
    }),
  ],
}

Параметры сборки для федерации

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

export default {
  plugins: [federation({ /* ... */ })],
  build: {
    target: "esnext",
  },
}

Объект exposes

Как и в Webpack, ключи — это публичные пути импорта, которые используют потребители, а значения — пути к локальным исходным файлам. Предоставляйте только то, что нужно другим командам.

exposes: {
  "./Widget": "./src/components/Widget.vue",
  "./useCart": "./src/composables/useCart.ts",
}

Конфигурация потребителя

В потребителе (хосте) добавьте federation с объектом remotes, сопоставляющим псевдоним с URL remoteEntry.js удаленного приложения.

import federation from "@originjs/vite-plugin-federation"

export default {
  plugins: [
    federation({
      name: "host_app",
      remotes: {
        remote_app: "https://remote.example.com/assets/remoteEntry.js",
      },
    }),
  ],
}

URL для remotes

Значением служит полный URL собранного remoteEntry.js. В режиме разработки указывайте сервер предварительного просмотра удаленного приложения, а в рабочей среде — его путь на CDN.

remotes: {
  remote_app: "https://remote.example.com/assets/remoteEntry.js",
}

Общие зависимости

Добавьте массив shared, чтобы хост и удаленное приложение использовали одну копию общих библиотек. Указание vue необходимо, чтобы сохранить один экземпляр Vue.

federation({
  name: "host_app",
  remotes: { /* ... */ },
  shared: ["vue", "pinia"],
})

Использование компонента удаленного приложения

Импортируйте модуль через псевдоним и предоставленное имя. Используйте динамический импорт с defineAsyncComponent, поскольку код загружается во время выполнения.

import { defineAsyncComponent } from "vue"

const Widget = defineAsyncComponent(() =>
  import("remote_app/Widget")
)

Объявления типов для удаленных приложений

TypeScript не знает типы удаленных модулей. Объявите их, чтобы импорты проходили проверку типов.

// remotes.d.ts
declare module "remote_app/Widget" {
  import type { DefineComponent } from "vue"
  const component: DefineComponent
  export default component
}

Предварительный просмотр вместо режима разработки для удаленных приложений

Федерации нужен собранный remoteEntry.js, который сервер разработки Vite формирует иначе. Соберите удаленное приложение и обслуживайте его через vite preview, чтобы хост мог его загрузить.

// remote terminal
// vite build && vite preview --port 5001

Быстрая проверка

Проверьте, насколько вы понимаете плагин федерации для Vite.

Ответь в интерактивном уроке

Повторение

Вы изучили федерацию в Vite:

@originjs/vite-plugin-federation добавляет Module Federation в Vite.
Конфигурация поставщика задает name и объект exposes (публичное имя и локальный файл).
Конфигурация потребителя задает объект remotes, сопоставляющий псевдоним с URL remoteEntry.js удаленного приложения.
Перечисляйте общие зависимости, включая vue, в shared.
Используйте динамический import("alias/Module"); соберите удаленное приложение и запустите для него vite preview.

Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 42
Уроки: 156

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «Плагин федерации Vite» бесплатный?

Да — полный текст урока «Плагин федерации Vite» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «Плагин федерации Vite»?

@originjs/vite-plugin-federation, настройка производителя и потребителя и динамический импорт удалённых модулей Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Плагин федерации Vite»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Vue Academy