Vue Academy · Lección

Plugin de Federation para Vite

@originjs/vite-plugin-federation, configuración de productor/consumidor e importación dinámica de remotes

Lección 3 de 413 pasos

Plugin de Federation para Vite es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.

Federación en Vite

Module Federation comenzó en Webpack, pero muchas aplicaciones Vue utilizan Vite. El plugin de la comunidad @originjs/vite-plugin-federation incorpora la federación a los productores y consumidores basados en Vite.

Instalar el plugin

Añada el plugin tanto a la aplicación productora (el remoto) como a la aplicación consumidora (el host).

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

Configuración del productor

En el productor (remoto), en vite.config.ts, añada federation con un name y un objeto exposes que asigne nombres públicos a archivos locales.

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

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

Configuración de compilación para la federación

El plugin requiere un destino de compilación moderno y, en algunas configuraciones, desactivar la minificación de módulos. Establezca el destino de compilación para que funcionen las importaciones dinámicas y el await de nivel superior.

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

El objeto exposes

Al igual que en Webpack, las claves son las rutas de importación públicas que utilizan los consumidores; los valores son rutas a archivos de código fuente locales. Exponga solo lo que necesiten los demás equipos.

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

Configuración del consumidor

En el consumidor (host), añada federation con un objeto remotes que asigne un alias a la URL del remoteEntry.js del remoto.

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

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

La URL de remotes

El valor es la URL completa del remoteEntry.js compilado. Durante el desarrollo, apunte al servidor de vista previa del remoto; en producción, a su ruta desplegada en la CDN.

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

Dependencias compartidas

Añada un array shared para que el host y el remoto utilicen una sola copia de las bibliotecas comunes. Incluir vue es esencial para mantener una única instancia de Vue.

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

Consumir un componente remoto

Importe el componente mediante el alias y el nombre expuesto. Utilice una importación dinámica con defineAsyncComponent, ya que el código se obtiene durante la ejecución.

import { defineAsyncComponent } from "vue"

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

Declaraciones de tipos para remotos

TypeScript no conoce los tipos de los módulos remotos. Declárelos para que las importaciones pasen la comprobación de tipos.

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

Vista previa, no desarrollo, para los remotos

La federación necesita el remoteEntry.js compilado, que el servidor de desarrollo de Vite no genera de la misma manera. Compile el remoto y sírvalo con vite preview para que el host pueda obtenerlo.

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

Comprobación rápida

Compruebe su comprensión del plugin de federación de Vite.

Responde en la lección interactiva

Resumen

Aprendió la federación de Vite:

@originjs/vite-plugin-federation incorpora Module Federation a Vite.
La configuración del productor establece name y un objeto exposes (nombre público a archivo local).
La configuración del consumidor establece un objeto remotes que asigna un alias a la URL del remoteEntry.js del remoto.
Enumere las dependencias compartidas (incluido vue) en shared.
Consuma mediante import("alias/Module") dinámico; compile el remoto y ejecútelo con vite preview.

Gratis para empezar

Aprende HTML con un tutor de IA — gratis

Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.

Cursos: 42
Lecciones: 156

Empezar a aprender gratis Ver el curso completo

Preguntas frecuentes

¿La lección «Plugin de Federation para Vite» es gratis?

Sí — el texto completo de «Plugin de Federation para Vite» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Plugin de Federation para Vite»?

@originjs/vite-plugin-federation, configuración de productor/consumidor e importación dinámica de remotes Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Vue Academy?

No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Plugin de Federation para Vite»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Vue Academy?

Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Principios de arquitectura de microfrontends
Module Federation de Webpack con Vue
Plugin de Federation para Vite
Estado compartido entre microfrontends

← Volver a Vue Academy