Cara menggunakan Federasi Modul Webpack di React | Oleh Oskari Rautiainen | Juni 2022

Membangun arsitektur mikro-frontend dengan mudah

Module Federation adalah alat yang hebat untuk membangun arsitektur mikro-frontend dalam aplikasi React. Saya akan menunjukkan kepada Anda bagaimana menggunakannya dalam panduan langkah demi langkah untuk membangun pola mikro-frontend Host-Remote di React.

Micro-frontends membantu kami mengubah aplikasi frontend yang besar menjadi aplikasi atau modul mandiri yang lebih kecil yang dapat dibangun dan digunakan sesuai keinginan mereka.

Melakukannya dengan menggunakan Federasi Modul memungkinkan kami untuk mengintegrasikan aplikasi ke dalam browser klien saat runtime, menghilangkan ketergantungan dan koordinat waktu pembuatan, dan memungkinkan tim yang membangun aplikasi ini untuk Berkembang dalam skala besar.

Konfigurasi akhir dapat ditemukan di sini: https://github.com/rautio/react-micro-frontend-example

Kami sedang membangun dua program: host Dan remote.

Pada host Program ini adalah program “asli” dan remote Adalah sub-aplikasi yang dilampirkan.

Federasi modul mendukung perawatannya host Bangun arsitektur unik sebagai remote control dan jika itu sesuai dengan kondisi penggunaan Anda. Lebih lanjut tentang ini nanti.

Kami bermaksud untuk menggunakan create-react-app Untuk menyederhanakan langkah-langkah awal

Di direktori root Anda:

npx create-react-app hostnpx create-react-app remote

Ini membuat dua program untuk Anda:

host/remote/

Di dalam masing-masing host/ Dan remote/ Lari:

npm install --save-dev webpack webpack-cli html-webpack-plugin webpack-dev-server babel-loader

Ini akan menginstal wepback dan dependensi yang kita butuhkan untuk mengkonfigurasi paket web kita.

Federasi Modul Webpack hanya tersedia di versi 5 dan di atasnya dari webpack.

Kami ingin memulai dengan mengkonfigurasi paket web kami

Membuat baru webpack.config.js File di root host/:

Ini adalah contoh paket web untuk kami unduh js Dan jsx Kode menggunakan babel-loader Dan disuntikkan menjadi satu html Format.

Selanjutnya, kita perlu yang baru start Script yang menggunakan konfigurasi paket web kami:

Sekarang kita bisa masuk ke inti dari program tuan rumah.

Pertama kita pergi ke index.js Login Kami sedang mengimpor file lain bootstrap.js Yang membuat program React.

Alasan kami membutuhkan lapisan tidak langsung tambahan ini adalah karena lapisan ini memberi Webpack kemampuan untuk mengunduh semua impor yang diperlukan untuk membuat program dari jarak jauh.

Jika tidak, Anda akan melihat kesalahan pada baris berikut:

Shared module is not available for eager consumption

Pada langkah selanjutnya, kita mendefinisikan bootstrap.js File yang dirender oleh React program kami.

Sekarang kita siap untuk menulis sendiri App.js File di mana logika utama program terjadi. Di sini kami ingin memuat 2 komponen dari atas remote Yang akan kita tentukan nanti.

import("Remote/App") Mengambil aplikasi jarak jauh secara dinamis App.js komponen reaksi.

Kita perlu menggunakan lazy loader dan komponen ErrorBoundary untuk menciptakan pengalaman pengguna yang lancar jika pengambilan memakan waktu lama atau menyebabkan kesalahan pada aplikasi host kita.

Kami belum siap menjalankan program. Selanjutnya, kita perlu menambahkan Federasi Modul untuk memberi tahu kita host Dimana mendapatkannya? Remote/App Dan Remote/Button Komponen.

Dalam diri kami webpack.config.js Memperkenalkan ModuleFederationPlugin:

Poin penting yang perlu diperhatikan:

• name Digunakan untuk mendeteksi modul. Ini tidak begitu penting di sini karena kami tidak mengungkapkan apa pun tetapi sangat penting Remote Program
• remotes Di sinilah kami mendefinisikan modul federal yang ingin kami gunakan dalam program ini. Anda akan melihat bahwa kami menentukan Remote Sebagai nama internal, jadi kami dapat memuat komponen menggunakan import("Remote/<component>"). Tetapi kami juga menentukan di mana definisi modul kendali jarak jauh di-host: [email protected]://localhost:4000/moduleEntry.js. URL ini memberitahu kita tiga hal penting. Apakah nama modulnya? RemoteDihosting localhost:4000 Dan definisi modulnya moduleEntry.js.
• shared Inilah cara kami berbagi dependensi antar modul. Ini sangat penting untuk React karena memiliki mode global yang berarti Anda hanya perlu menjalankan satu instance React dan ReactDOM di setiap program tertentu. Untuk mencapai ini dalam arsitektur kami, kami memberi tahu paket web untuk mempertimbangkan React dan ReactDOM sebagai perilaku tersebut. singleton Oleh karena itu, versi unduhan pertama dari setiap modul digunakan untuk keseluruhan program. Selama itu memuaskan requiredVersion Kami mendefinisikan kami juga mengimpor semua dependensi kami yang lain darinya package.json Dan letakkan di sini untuk meminimalkan jumlah dependensi duplikat di antara modul kita.

Sekarang jika kita lari npm start Dalam program host akan terlihat seperti:

Ini berarti kita host Aplikasi ini sepenuhnya dikonfigurasi tetapi kami remote Aplikasi ini belum mengungkapkan apa pun. Jadi kita harus mengkonfigurasinya pada langkah selanjutnya.

Mari kita mulai dengan webpack Konfigurasi Karena kita sekarang memiliki pengetahuan tentang federasi modul, gunakan dari awal:

Poin penting yang perlu diperhatikan adalah:

• Server pengembang paket web kami berjalan pada localhost:4000
• Ini adalah nama modul jarak jauh Remote
• partikel untuk objek langsung filename Adalah moduleEntry.js

Menggabungkan ini bersama-sama memungkinkan tuan rumah kami menemukan kode jarak jauh [email protected]://localhost:4000/moduleEntry.js

exposes Di sinilah kami mendefinisikan kode yang ingin kami bagikan moduleEntry.js mengajukan. Di sini kami mengungkapkan dua hal: <App /> Dan <Button />.

Sekarang mari kita konfigurasikan komponen-komponen tersebut dan program Remote kita agar dapat berjalan sendiri.

Mirip dengan program Host, kita membutuhkan penyisipan dinamis di input web tertutup kita.

Remote jauh lebih mudah daripada Host:

Dan kami juga ingin mengungkapkan <Button /> component

Aplikasi Jarak Jauh sekarang sepenuhnya dikonfigurasi dan jika Anda menjalankannya npm start Anda akan melihat halaman kosong dengan “Halo dari sisi lain”.

Sekarang jika kita lari npm start di keduanya host/ Dan remote/ Direktori tempat kita akan melihat program Host berjalan localhost:3000 Dan aplikasi jarak jauh sedang berjalan localhost:4000.

Program host akan terlihat seperti ini:

Selamat! Anda sekarang telah mengonfigurasi aplikasi Micro Frontend menggunakan React.

Anda dapat menyederhanakan proses pengembangan dengan mengonfigurasi ruang kerja utas di tingkat root: https://classic.yarnpkg.com/lang/en/docs/workspaces/

Kami hanya membahas implementasi Micro Frontend secara lokal. Jika Anda ingin menerapkannya, Anda harus menerapkan setiap aplikasi secara terpisah di CDN atau layanan hosting Anda, dan mengonfigurasi definisi paket web untuk menggunakan variabel lingkungan atau cara lain untuk memperbarui URL secara dinamis. ModuleFederationPlugin definisi

Contohnya dapat ditemukan di program sampel saya yang lebih canggih: https://github.com/rautio/micro-frontend-demo

Kode untuk contoh ini:

Contoh yang lebih maju:

Contoh aplikasi Webpack untuk struktur peer-to-peer:

Dokumen Paket Web: