Ana Makine ve Uzak React Uygulamalarını Yapılandırma

Uzak uygulama, webpack yapılandırmasına ModuleFederationPlugin'ı üç temel özellikle ekler: name (benzersiz tanımlayıcı, ör. "buttonApp"), filename ("remoteEntry.js" — bildirim çıktısı) ve exposes (genel adları kaynak dosyası yollarıyla eşleyen bir harita).

exposes yapılandırması, genel bir modül yolunu yerel bir dosyayla eşler: { './Button': './src/Button' }. Bu, ana uygulamanın 'buttonApp/Button' içe aktarmasını ve bileşeni ./src/Button.tsx dosyasından almasını sağlar. Birden çok bileşeni, yardımcı programı veya hatta tüm sayfaları dışa açabilirsiniz.

shared özelliği, yinelenmek yerine ana uygulama ile uzak uygulama arasında paylaşılması gereken modülleri Module Federation'a bildirir. React için: shared: { react: { singleton: true, requiredVersion: deps.react }, 'react-dom': { singleton: true } }. singleton:true, birden çok örneğin aynı anda yüklenmesini önler.

Ana uygulamanın ModuleFederationPlugin yapılandırması bir remotes özelliği içerir: { buttonApp: 'buttonApp@http://localhost:3001/remoteEntry.js' }. Anahtar, içe aktarma ad alanıdır; değer ise uzak uygulamanın adıyla URL'sinin @ işareti kullanılarak birleştirilmiş hâlidir. Bu, Webpack'e uzak uygulamayı çalışma zamanında nereden alacağını bildirir.

Ana uygulamanın React kodunda, uzak bileşeni dinamik içe aktarmayla yükleyin: const Button = React.lazy(() => import('buttonApp/Button')). İçe aktarma yolu, uzak uygulamanın ad alanı ile dışa açılan modül adını eşleştirir. React.lazy, içe aktarmayı kod bölümlendirmeli ve eşzamansız olarak yüklenen hâle getirir.

Uzak modüller eşzamansız yüklendiğinden, tembel yüklenen uzak bileşeni her zaman bir Suspense sınırıyla sarmalayın: Suspense fallback=Loading... /. Geri dönüş içeriği, Module Federation uzak URL'den remoteEntry.js dosyasını ve bileşen parçasını alırken oluşturulur.

React'in kancaları (useState, useContext, useEffect), bileşen durumunu izlemek için tek bir dahili React örneğine bağlıdır. Hem ana uygulama hem de uzak uygulama kendi React kopyasını yüklerse kancalar "geçersiz kanca çağrısı" hataları verir. singleton:true, bunları tek bir React örneğini paylaşmaya zorlayarak bu hata sınıfını tamamen çözer.

Ana uygulama react@18.2.0, uzak uygulama ise react@18.3.0 kullandığında Module Federation'ın paylaşılan kapsamı hangi sürümün kullanılacağını uzlaştırır. singleton:true ve requiredVersion ile genellikle uyumluysa daha yüksek sürümü kullanır. Sabitlenmiş bir sürüm yerine requiredVersion: '>=18.0.0' ayarlamak esnek sürüm aralıklarına izin verir.

TypeScript, derleme zamanında uzak modülleri bilmez; bu nedenle import('buttonApp/Button') gibi içe aktarmalar bildirimler olmadan tür hataları verir. @module-federation/typescript kullanın veya modül türlerini bildiren .d.ts dosyalarını elle oluşturun. Böylece uzak bileşen özellikleri için tür güvenliği elde edersiniz.

Her iki uygulamayı aynı anda çalıştırın: uzak uygulama 3001, ana uygulama 3000 numaralı bağlantı noktasında çalışsın. Ana uygulamayı açın — Module Federation çalışma zamanı http://localhost:3001/remoteEntry.js adresini alır, Button modülünü keşfeder, modülün parçasını indirir ve onu ana uygulamanın içinde yerel bir bileşenmiş gibi oluşturur.

Üretimde localhost:3001 yerine dağıtılmış uzak uygulamanın URL'sini kullanın. Yaygın bir yaklaşım, uzak uygulamanın URL'si için bir ortam değişkeni kullanmaktır; böylece CI/CD her ortam için doğru URL'yi ekleyebilir: buttonApp: 'buttonApp@' + process.env.BUTTON_REMOTE_URL + '/remoteEntry.js'.

Module Federation'ın paylaşılan yapılandırmasında React neden tekil olarak yapılandırılmalıdır?

Module Federation'ı yapılandırmak, hem uzak uygulamada (name, filename, exposes ile) hem de ana uygulamada (remotes ile) ModuleFederationPlugin gerektirir. Uzak bileşenleri React.lazy ve Suspense ile sarmalanmış dinamik içe aktarma kullanarak tüketin. React ve React DOM, birden çok örnekten kaynaklanan kanca hatalarını önlemek için paylaşılan tekil modüller olmalıdır. TypeScript bildirimleri ve ortam değişkeni tabanlı uzak URL'ler, üretime hazır kurulumu tamamlar.