Module Federation

تو بحث میکروفرانت اند برای طراحی این معماری، بخشی داشتیم تحت عنوان پیاده سازی لایه Composition:

این لایه میتونه به دو صورت Client Side و Server Side طراحی شود.

گفتیم برای طراحی Client Side باید از تکنیک Module Federation استفاده کنیم.

حالا میخوایم بگیم Module Federation اصلا چیه و یعنی چی؟

در واقع Module Federation یک ویژگی از Webpack5 است که این امکان رو میده که کدهای جاوااسکریپت رو بین اپ های مختلف در معماری میکرو فرانت اند به اشتراک بگذارید این ویژگی به صورت اختصاصی برای معماری میکروفرانت اند طراحی شده اما می‌تواند در سایر سناریوهای نیازمند به اشتراک‌گذاری ماژول‌ها هم از آن استفاده کنید.

با استفاده از این ویژگی اپ ها میتوانند کد های خود را در برنامه به اشتراک بگذارند بدون اینکه نیاز به کپی یا تکرار کد باشد.

با استفاده از این ویژگی شما میتوانید ماژول های مختلف را از اپ های مختلف دانلود و استفاده کنید.

برای استفاده از این ویژگی باید دو پیکر بندی را در Webpack اعمال کنید:

• Remote Application:

این اپلیکیشن (یا Micro Frontend) اپلیکیشنی است که ماژول‌های قابل اشتراک‌گذاری را ارائه می‌دهد.
پیکربندی آن شامل اطلاعاتی است که نشان می‌دهد کدام ماژول‌ها برای به اشتراک‌گذاری آماده هستند و از کجا در دسترس هستند.

مثال:

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {

  plugins: [

    new ModuleFederationPlugin({

      name: 'remoteApp',

      filename: 'remoteEntry.js',

      exposes: {

        './Button': './src/Button',

        './Header': './src/Header'

      },

      shared: ['react', 'react-dom']

    })

  ]

};

در این پیکربندی، remoteApp ماژول‌های Button و Header را برای به اشتراک‌گذاری در دسترس قرار می‌دهد.

• Host Application:

این اپلیکیشن (یا Shell Application) اپلیکیشنی است که ماژول‌ها را دانلود و استفاده می‌کند.
پیکربندی آن شامل اطلاعاتی در مورد ماژول‌هایی است که قصد دارد از آن‌ها استفاده کند.

مثال:

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {

  plugins: [

    new ModuleFederationPlugin({

      name: 'hostApp',

      remotes: {

        remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js'

      },

      shared: ['react', 'react-dom']

    })

  ]

};

در این پیکربندی، hostApp ماژول‌های remoteApp را از طریق آدرس مشخص شده بارگذاری می‌کند.

حالا چطوری از این ماژول یا کامپوننت های مشترک استفاده کنیم؟

import React from 'react';

import ReactDOM from 'react-dom';

import Button from 'remoteApp/Button'; 

function App() {

  return <Button />;

}

ReactDOM.render(<App />, document.getElementById('root'));

امیدوارم این مطلب براتون مفید بوده باشه :)