0Pricing
Vue Academy · Leçon

Plugin de fédération Vite

@originjs/vite-plugin-federation, configuration producteur-consommateur et import dynamique des remotes

Plugin de fédération Vite est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.

La fédération avec Vite

Module Federation a commencé dans Webpack, mais de nombreuses applications Vue utilisent Vite. Le plugin communautaire @originjs/vite-plugin-federation apporte la fédération aux applications productrices et consommatrices basées sur Vite.

Installer le plugin

Ajoutez le plugin à l’application productrice (l’application distante) et à l’application consommatrice (l’hôte).

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

Configuration du producteur

Dans le producteur (l’application distante) vite.config.ts, ajoutez federation avec un name et un objet exposes associant des noms publics à des fichiers locaux.

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

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

Paramètres de compilation pour la fédération

Le plugin nécessite une cible de compilation moderne et, dans certaines configurations, la désactivation de la minification des modules. Définissez la cible de compilation afin que les importations dynamiques et l’utilisation de await au niveau supérieur fonctionnent.

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

L’objet exposes

Comme avec Webpack, les clés sont les chemins d’importation publics utilisés par les consommateurs ; les valeurs sont les chemins vers les fichiers source locaux. N’exposez que ce dont les autres équipes ont besoin.

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

Configuration du consommateur

Dans le consommateur (l’hôte), ajoutez federation avec un objet remotes associant un alias à l’URL du remoteEntry.js de l’application distante.

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

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

L’URL des applications distantes

La valeur est l’URL complète du remoteEntry.js compilé. En développement, vous indiquez le serveur de prévisualisation de l’application distante ; en production, son chemin déployé sur le CDN.

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

Dépendances partagées

Ajoutez un tableau shared afin que l’hôte et l’application distante utilisent une seule copie des bibliothèques communes. La présence de vue est essentielle pour conserver une seule instance de Vue.

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

Consommer un composant distant

Importez le composant à partir de l’alias et du nom exposé. Utilisez une importation dynamique avec defineAsyncComponent, puisque le code est récupéré au moment de l’exécution.

import { defineAsyncComponent } from "vue"

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

Déclarations de types pour les applications distantes

TypeScript ne connaît pas les types des modules distants. Déclarez-les afin que les importations soient vérifiées par le système de types.

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

Prévisualisation, pas développement, pour les applications distantes

La fédération a besoin du remoteEntry.js compilé, que le serveur de développement Vite ne produit pas de la même manière. Compilez l’application distante et servez-la avec vite preview afin que l’hôte puisse la récupérer.

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

Vérification rapide

Vérifiez votre compréhension du plugin de fédération de Vite.

Récapitulatif

Vous avez appris la fédération avec Vite :

  • @originjs/vite-plugin-federation apporte Module Federation à Vite.
  • La configuration du producteur définit name et un objet exposes (nom public associé à un fichier local).
  • La configuration du consommateur définit un objet remotes associant un alias à l’URL du remoteEntry.js de l’application distante.
  • Répertoriez les dépendances partagées, notamment vue, dans shared.
  • Consommez-les avec import("alias/Module") dynamique ; compilez l’application distante, puis utilisez vite preview.

Questions Fréquemment Posées

La leçon « Plugin de fédération Vite » est-elle gratuite ?

Oui — le texte complet de « Plugin de fédération Vite » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Plugin de fédération Vite » ?

@originjs/vite-plugin-federation, configuration producteur-consommateur et import dynamique des remotes Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Vue Academy ?

Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Plugin de fédération Vite » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?

Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Principes de l’architecture micro-frontend
  2. Fédération de modules Webpack avec Vue
  3. Plugin de fédération Vite
  4. État partagé entre micro-frontends
← Retour à Vue Academy