การกำหนดค่าแอปรีแอ็กต์โฮสต์และรีโมต

แอปพลิเคชันรีโมตเพิ่ม ModuleFederationPlugin ลงในการกำหนดค่า webpack โดยมีคุณสมบัติสำคัญสามรายการ ได้แก่ name (ตัวระบุที่ไม่ซ้ำกัน เช่น "buttonApp"), filename ("remoteEntry.js" — ไฟล์รายการผลลัพธ์) และ exposes (แผนผังจากชื่อสาธารณะไปยังเส้นทางไฟล์ต้นฉบับ)

การกำหนดค่า exposes จะจับคู่เส้นทางมอดูลสาธารณะกับไฟล์ภายใน: { './Button': './src/Button' } ซึ่งหมายความว่าโฮสต์สามารถนำเข้า 'buttonApp/Button' และรับคอมโพเนนต์จาก ./src/Button.tsx ได้ คุณสามารถเปิดให้ใช้คอมโพเนนต์ ชุดเครื่องมือ หรือแม้แต่หน้าทั้งหมดได้หลายรายการ

คุณสมบัติ shared จะบอก Module Federation ว่าควรใช้มอดูลใดร่วมกันระหว่างโฮสต์กับรีโมตแทนการทำซ้ำ สำหรับ React: shared: { react: { singleton: true, requiredVersion: deps.react }, 'react-dom': { singleton: true } } โดย singleton:true จะป้องกันไม่ให้อินสแตนซ์หลายตัวโหลดพร้อมกัน

การกำหนดค่า ModuleFederationPlugin ของแอปพลิเคชันโฮสต์มีคุณสมบัติ remotes ดังนี้: { buttonApp: 'buttonApp@http://localhost:3001/remoteEntry.js' } คีย์คือเนมสเปซสำหรับการนำเข้า ส่วนค่าคือชื่อรีโมตกับ URL ที่นำมาประกอบกันด้วย @ ซึ่งจะบอก Webpack ว่าต้องดึงรีโมตจากที่ใดขณะทำงาน

ในโค้ด React ของโฮสต์ ให้นำเข้าคอมโพเนนต์รีโมตด้วยการนำเข้าแบบไดนามิก: const Button = React.lazy(() => import('buttonApp/Button')) เส้นทางการนำเข้าตรงกับเนมสเปซของรีโมตและชื่อมอดูลที่เปิดให้ใช้ React.lazy ทำให้โค้ดของการนำเข้าถูกแยกเป็นส่วนและโหลดแบบไม่พร้อมกัน

เนื่องจากมอดูลรีโมตโหลดแบบไม่พร้อมกัน จึงควรครอบคอมโพเนนต์รีโมตที่นำเข้าแบบ lazy ด้วยขอบเขต Suspense เสมอ: Suspense fallback=Loading... / โดย fallback จะแสดงระหว่างที่ Module Federation ดึง remoteEntry.js และส่วนย่อยของคอมโพเนนต์จาก URL ของรีโมต

ฮุกของ React (useState, useContext, useEffect) อาศัยอินสแตนซ์ React ภายในเพียงตัวเดียวเพื่อติดตามสถานะของคอมโพเนนต์ หากทั้งโฮสต์และรีโมตโหลด React ของตนเองคนละชุด ฮุกจะทำให้เกิดข้อผิดพลาด "invalid hook call" singleton:true บังคับให้ทั้งสองส่วนใช้ React อินสแตนซ์เดียวกัน จึงแก้ไขข้อผิดพลาดกลุ่มนี้ได้ทั้งหมด

เมื่อโฮสต์ใช้ react@18.2.0 และรีโมตใช้ react@18.3.0 ขอบเขตที่ใช้ร่วมกันของ Module Federation จะเจรจาว่าควรใช้รุ่นใด เมื่อใช้ singleton:true ร่วมกับ requiredVersion ระบบมักจะเลือกรุ่นที่สูงกว่าเมื่อเข้ากันได้ การตั้งค่า requiredVersion: '>=18.0.0' แทนรุ่นที่ระบุแน่นอนช่วยให้ใช้ช่วงรุ่นที่ยืดหยุ่นได้

TypeScript ไม่รู้จักมอดูลรีโมตขณะคอมไพล์ ดังนั้นการนำเข้าอย่าง import('buttonApp/Button') จะทำให้เกิดข้อผิดพลาดด้านชนิดข้อมูลหากไม่มีการประกาศ ให้ใช้ @module-federation/typescript หรือสร้างไฟล์ .d.ts ที่ประกาศชนิดของมอดูลด้วยตนเอง เพื่อให้ตรวจสอบชนิดข้อมูลของพร็อพส์คอมโพเนนต์รีโมตได้อย่างปลอดภัย

เรียกใช้แอปทั้งสองพร้อมกัน โดยให้รีโมตทำงานที่พอร์ต 3001 และโฮสต์ทำงานที่พอร์ต 3000 เปิดโฮสต์ แล้วรันไทม์ของ Module Federation จะดึง http://localhost:3001/remoteEntry.js ค้นหามอดูล Button ดาวน์โหลดส่วนย่อย และเรนเดอร์มอดูลนั้นภายในแอปโฮสต์เสมือนเป็นคอมโพเนนต์ภายในแอปเอง

ในสภาพแวดล้อมใช้งานจริง ให้แทนที่ localhost:3001 ด้วย URL ของรีโมตที่นำไปใช้งานแล้ว แนวทางทั่วไปคือใช้ตัวแปรสภาพแวดล้อมสำหรับ URL ของรีโมต เพื่อให้ CI/CD ใส่ URL ที่ถูกต้องตามแต่ละสภาพแวดล้อมได้: buttonApp: 'buttonApp@' + process.env.BUTTON_REMOTE_URL + '/remoteEntry.js'

เหตุใดจึงต้องกำหนดให้ React เป็นซิงเกิลตันในการกำหนดค่ามอดูลที่ใช้ร่วมกันของ Module Federation?

การกำหนดค่า Module Federation ต้องมี ModuleFederationPlugin ทั้งบนรีโมต (พร้อม name, filename และ exposes) และบนโฮสต์ (พร้อม remotes) ให้ใช้คอมโพเนนต์รีโมตผ่าน React.lazy + การนำเข้าแบบไดนามิกที่ครอบด้วย Suspense ต้องกำหนดให้ React และ React DOM เป็นซิงเกิลตันที่ใช้ร่วมกัน เพื่อป้องกันข้อผิดพลาดของฮุกจากการมีหลายอินสแตนซ์ การประกาศสำหรับ TypeScript และ URL รีโมตผ่านตัวแปรสภาพแวดล้อมจะช่วยให้การตั้งค่าพร้อมใช้งานจริงอย่างสมบูรณ์