Vue Academy · Урок

Webpack Module Federation с Vue

ModuleFederationPlugin, exposes, remotes, общие зависимости и загрузка удалённых компонентов

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

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

Module Federation в Webpack

В Webpack 5 Module Federation встроен изначально. Он позволяет одной сборке предоставлять модули другим сборкам и получать модули от них во время выполнения — это основа микрофронтендов, работающих во время выполнения.

Хосты и удаленные приложения

Есть две роли: удаленное приложение предоставляет компоненты, а хост использует их. Приложение может выполнять обе роли. Хост загружает код удаленного приложения по HTTP во время выполнения, а не во время сборки.

Плагин ModuleFederationPlugin

Федерация настраивается добавлением ModuleFederationPlugin в массив plugins webpack. Его параметры определяют имя, предоставляемые модули, используемые модули и общие зависимости.

const { ModuleFederationPlugin } = require("webpack").container

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: "checkout",
    }),
  ],
}

Параметр name

name — уникальный глобальный идентификатор этой сборки. Хосты обращаются к удаленному приложению по этому имени.

new ModuleFederationPlugin({
  name: "checkout",
  filename: "remoteEntry.js",
})

Параметр exposes (удаленное приложение)

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

new ModuleFederationPlugin({
  name: "checkout",
  filename: "remoteEntry.js",
  exposes: {
    "./CartButton": "./src/components/CartButton.vue",
  },
})

Манифест remoteEntry

Удаленное приложение создает манифест remoteEntry.js, описывающий предоставляемые модули. Хосты загружают этот файл, чтобы обнаружить и получить код удаленного приложения во время выполнения.

// host loads: https://checkout.example.com/remoteEntry.js

Параметр remotes (хост)

Хост объявляет в remotes, какие удаленные приложения он использует, сопоставляя локальный псевдоним с именем удаленного приложения и его URL remoteEntry.js.

new ModuleFederationPlugin({
  name: "shell",
  remotes: {
    checkout: "checkout@https://checkout.example.com/remoteEntry.js",
  },
})

Параметр shared

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

new ModuleFederationPlugin({
  name: "shell",
  remotes: { /* ... */ },
  shared: ["vue"],
})

singleton: true для Vue

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

shared: {
  vue: {
    singleton: true,
    requiredVersion: "^3.4.0",
  },
}

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

Импортируйте удаленный модуль динамически во время выполнения. Поскольку он загружается по сети, используйте динамический import() — обычно оборачивая его в defineAsyncComponent в Vue.

import { defineAsyncComponent } from "vue"

const CartButton = defineAsyncComponent(() =>
  import("checkout/CartButton")
)

Отрисовка удаленного компонента

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

<template>
  <header>
    <CartButton />
  </header>
</template>

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

Проверьте, насколько вы понимаете Module Federation с Vue.

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

Повторение

Вы изучили Module Federation в Webpack:

ModuleFederationPlugin настраивает федерацию; name идентифицирует сборку.
Удаленное приложение перечисляет exposes и создает манифест remoteEntry.js.
Хост перечисляет remotes, сопоставляя псевдоним с name@URL/remoteEntry.js.
shared предотвращает дублирование зависимостей; Vue требует singleton: true.
Удаленный модуль используется через динамический import("remote/Module"), часто вместе с defineAsyncComponent.

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

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

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

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

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

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

Урок «Webpack Module Federation с Vue» бесплатный?

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

Чему я научусь в уроке «Webpack Module Federation с Vue»?

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

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

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

Сколько времени занимает урок «Webpack Module Federation с Vue»?

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

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

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

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

← Назад к Vue Academy