Vue Academy · Pelajaran

Plugin Federation Vite

@originjs/vite-plugin-federation, penyiapan producer/consumer, serta impor dinamis remote.

Plugin Federation Vite adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Federasi di Vite

Federasi Modul dimulai di Webpack, tetapi banyak aplikasi Vue menggunakan Vite. Plugin komunitas @originjs/vite-plugin-federation menghadirkan federasi ke produsen dan konsumen berbasis Vite.

Memasang Plugin

Tambahkan plugin ke aplikasi produsen (modul jarak jauh) dan aplikasi konsumen (aplikasi induk).

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

Konfigurasi Produsen

Di produsen (modul jarak jauh) vite.config.ts, tambahkan federation dengan name dan objek exposes yang memetakan nama publik ke berkas lokal.

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

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

Pengaturan Pembangunan untuk Federasi

Plugin ini memerlukan target pembangunan modern dan penonaktifan peminifikasian modul pada beberapa pengaturan. Atur target pembangunan agar impor dinamis dan await tingkat atas dapat berfungsi.

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

Objek exposes

Seperti pada Webpack, kuncinya adalah jalur impor publik yang digunakan konsumen; nilainya adalah jalur ke berkas sumber lokal. Ekspos hanya hal-hal yang dibutuhkan tim lain.

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

Konfigurasi Konsumen

Di konsumen (aplikasi induk), tambahkan federation dengan objek remotes yang memetakan alias ke URL remoteEntry.js milik modul jarak jauh.

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 Modul Jarak Jauh

Nilainya adalah URL lengkap menuju remoteEntry.js yang telah dibangun. Dalam pengembangan, arahkan ke server pratinjau modul jarak jauh; dalam produksi, arahkan ke jalur CDN tempat modul tersebut diterapkan.

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

Dependensi Bersama

Tambahkan larik shared agar aplikasi induk dan modul jarak jauh menggunakan satu salinan pustaka umum. Mencantumkan vue sangat penting untuk mempertahankan satu instans Vue.

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

Menggunakan Komponen Modul Jarak Jauh

Impor dari alias dan nama yang diekspos. Gunakan impor dinamis dengan defineAsyncComponent karena kode tersebut diambil saat aplikasi berjalan.

import { defineAsyncComponent } from "vue"

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

Deklarasi Tipe untuk Modul Jarak Jauh

TypeScript tidak mengetahui tipe modul jarak jauh. Deklarasikan tipe tersebut agar impor dapat diperiksa tipenya.

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

Pratinjau, Bukan Pengembangan, untuk Modul Jarak Jauh

Federasi memerlukan remoteEntry.js yang telah dibangun, sedangkan server pengembangan Vite tidak menghasilkannya dengan cara yang sama. Bangun modul jarak jauh dan layani dengan vite preview agar aplikasi induk dapat mengambilnya.

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

Pemeriksaan Singkat

Periksa pemahaman Anda tentang plugin federasi Vite.

Rangkuman

Anda telah mempelajari federasi Vite:

@originjs/vite-plugin-federation menghadirkan Federasi Modul ke Vite.
Konfigurasi produsen menetapkan name dan objek exposes (nama publik ke berkas lokal).
Konfigurasi konsumen menetapkan objek remotes yang memetakan alias ke URL remoteEntry.js milik modul jarak jauh.
Daftarkan dependensi bersama, termasuk vue, dalam shared.
Gunakan melalui import("alias/Module") dinamis; bangun modul jarak jauh lalu jalankan vite preview.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Plugin Federation Vite” gratis?

Ya — teks lengkap “Plugin Federation Vite” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Plugin Federation Vite”?

@originjs/vite-plugin-federation, penyiapan producer/consumer, serta impor dinamis remote. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Plugin Federation Vite” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Vue Academy