Mengonfigurasi Aplikasi React Host dan Jarak Jauh

Aplikasi penyedia menambahkan ModuleFederationPlugin ke konfigurasi webpack-nya dengan tiga properti utama: name, yaitu pengenal unik, misalnya "buttonApp"; filename, yaitu "remoteEntry.js" sebagai keluaran manifest; dan exposes, yaitu pemetaan dari nama publik ke jalur berkas sumber.

Konfigurasi exposes memetakan jalur modul publik ke berkas lokal: { './Button': './src/Button' }. Artinya, aplikasi pemuat dapat mengimpor 'buttonApp/Button' dan menerima komponen dari ./src/Button.tsx. Anda dapat mengekspos beberapa komponen, utilitas, atau bahkan seluruh halaman.

Properti shared memberi tahu Module Federation modul mana yang harus dibagikan antara aplikasi pemuat dan aplikasi penyedia, bukan digandakan. Untuk React: shared: { react: { singleton: true, requiredVersion: deps.react }, 'react-dom': { singleton: true } }. singleton:true mencegah beberapa instans dimuat secara bersamaan.

Konfigurasi ModuleFederationPlugin aplikasi pemuat menyertakan properti remotes: { buttonApp: 'buttonApp@http://localhost:3001/remoteEntry.js' }. Kuncinya adalah ruang nama impor, sedangkan nilainya menggabungkan nama dan URL aplikasi penyedia dengan @—yang memberi tahu Webpack tempat mengambil aplikasi penyedia saat berjalan.

Dalam kode React aplikasi pemuat, impor komponen penyedia dengan impor dinamis: const Button = React.lazy(() => import('buttonApp/Button')). Jalur impor tersebut sesuai dengan ruang nama aplikasi penyedia dan nama modul yang diekspos. React.lazy membuat impor tersebut mengalami pemisahan kode dan dimuat secara asinkron.

Karena modul penyedia dimuat secara asinkron, selalu bungkus komponen penyedia yang diimpor secara malas dalam batas Suspense: Suspense fallback=Loading... /. Cadangan tersebut ditampilkan saat Module Federation mengambil remoteEntry.js dan potongan komponen dari URL aplikasi penyedia.

Pengait React (useState, useContext, useEffect) bergantung pada satu instans internal React untuk melacak status komponen. Jika aplikasi pemuat dan aplikasi penyedia masing-masing memuat salinan React sendiri, pengait akan menghasilkan kesalahan "invalid hook call". singleton:true memaksa keduanya berbagi satu instans React, sehingga sepenuhnya mengatasi kategori kesalahan ini.

Saat aplikasi pemuat menggunakan react@18.2.0 dan aplikasi penyedia menggunakan react@18.3.0, cakupan bersama Module Federation menegosiasikan versi mana yang akan digunakan. Dengan singleton:true dan requiredVersion, biasanya versi yang lebih tinggi digunakan jika kompatibel. Menetapkan requiredVersion: '>=18.0.0', bukan versi tetap, memungkinkan rentang versi yang fleksibel.

TypeScript tidak mengetahui modul penyedia saat waktu kompilasi, sehingga impor seperti import('buttonApp/Button') akan menghasilkan kesalahan tipe tanpa deklarasi. Gunakan @module-federation/typescript atau buat berkas .d.ts secara manual untuk mendeklarasikan tipe modul, sehingga Anda memperoleh keamanan tipe untuk properti komponen penyedia.

Jalankan kedua aplikasi secara bersamaan: aplikasi penyedia pada porta 3001 dan aplikasi pemuat pada porta 3000. Buka aplikasi pemuat—runtime Module Federation-nya akan mengambil http://localhost:3001/remoteEntry.js, menemukan modul Button, mengunduh potongannya, dan menampilkannya di dalam aplikasi pemuat seolah-olah itu komponen lokal.

Dalam produksi, ganti localhost:3001 dengan URL aplikasi penyedia yang telah diterapkan. Pola yang umum adalah menggunakan variabel lingkungan untuk URL aplikasi penyedia agar CI/CD dapat menyisipkan URL yang benar untuk setiap lingkungan: buttonApp: 'buttonApp@' + process.env.BUTTON_REMOTE_URL + '/remoteEntry.js'.

Mengapa React harus dikonfigurasi sebagai singleton dalam konfigurasi shared Module Federation?

Konfigurasi Module Federation memerlukan ModuleFederationPlugin pada aplikasi penyedia, dengan name, filename, dan exposes, serta pada aplikasi pemuat, dengan remotes. Gunakan komponen aplikasi penyedia melalui React.lazy + impor dinamis yang dibungkus dalam Suspense. React dan React DOM harus menjadi singleton bersama untuk mencegah kesalahan pengait akibat beberapa instans. Deklarasi TypeScript dan URL aplikasi penyedia dari variabel lingkungan melengkapi penyiapan yang siap produksi.