Micro Frontends Architecture with Module Federation · บทเรียน

การแชร์โมดูลและคอมโพเนนต์

เรียนรู้การเปิดเผยคอมโพเนนต์จากแอปพลิเคชันรีโมตและเรียกใช้คอมโพเนนต์เหล่านั้นในแอปพลิเคชันโฮสต์

บทเรียน 2 จาก 411 ขั้นตอน

การแชร์โมดูลและคอมโพเนนต์ เป็นบทเรียน Micro Frontends Architecture with Module Federation ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Micro Frontends Architecture with Module Federation และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Micro Frontends Architecture with Module Federation มีบทเรียนทั้งหมด 4 บทเรียน

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

Intro to Module Sharing

In this lesson, we'll dive into the heart of Micro Frontends: sharing code!

We'll learn how one application can "expose" its components or modules, and how another application can "consume" them. This is key to building truly independent yet collaborative federated apps.

Understanding Exposed Modules

An exposed module is a piece of code (like a React component, a utility function, or even a data store) that one Micro Frontend application decides to make available to other applications.

Think of it like publishing a library.
The application making it available is called the Remote Application.
It's configured within the Remote's Webpack setup.

How a Remote Exposes

To expose a module, you configure the ModuleFederationPlugin in your remote application's webpack.config.js. The exposes property is where the magic happens.

You define a public name for the module and point it to its local path.

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  // ... other webpack config ...
  plugins: [
    new ModuleFederationPlugin({
      name: 'remoteApp',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/components/Button.jsx',
        './Header': './src/components/Header.jsx'
      },
      shared: ['react', 'react-dom']
    })
  ]
};

Example: Our Shared Button

Let's imagine a simple React button component that our remote application wants to share. This component lives in ./src/components/Button.jsx.

It's just a regular React component until we expose it.

// src/components/Button.jsx
import React from 'react';

const Button = ({ onClick, children }) => {
  return (
    <button
      onClick={onClick}
      style={{
        padding: '10px 20px',
        backgroundColor: '#007bff',
        color: 'white',
        border: 'none',
        borderRadius: '5px',
        cursor: 'pointer'
      }}
    >
      {children}
    </button>
  );
};

export default Button;

Consuming Remote Modules

On the flip side, a remote module is a module that an application wants to use, but it's hosted by another federated application.

The application consuming it is called the Host Application.
The Host needs to know where to find the Remote Application's exposed modules.

How a Host Consumes

The host application also uses the ModuleFederationPlugin. Here, you define the remotes property, mapping a local alias to the remote application's entry point.

The entry point is typically remoteEntry.js, generated by the remote app's Webpack build.

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  // ... other webpack config ...
  plugins: [
    new ModuleFederationPlugin({
      name: 'hostApp',
      remotes: {
        remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js'
      },
      shared: ['react', 'react-dom']
    })
  ]
};

Importing & Using Shared Components

Once configured, the host application can import the remote component as if it were a local module. Webpack (via Module Federation) handles the dynamic loading from the remote URL.

Try running this simple example:

// This simulates a host app importing a remote component.
// In a real setup, 'remoteApp/Button' would resolve to the
// component exposed by the 'remoteApp' through Module Federation.
import React from 'react';
import ReactDOM from 'react-dom/client';

// Imagine 'remoteApp/Button' is the component we exposed earlier
// This import is resolved by Webpack's Module Federation Plugin
const RemoteButton = React.lazy(() => import('remoteApp/Button'));

function App() {
  return (
    <div>
      <h1>Host Application</h1>
      <React.Suspense fallback={<div>Loading Remote Button...</div>}>
        <RemoteButton onClick={() => alert('Button Clicked!')}>
          Click Me From Remote!
        </RemoteButton>
      </React.Suspense>
    </div>
  );
}

// Full entry point for a runnable React app
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Behind the Scenes: Dynamic Loading

When the host application tries to import remoteApp/Button, Webpack doesn't look for it in the local node_modules. Instead, it uses the remotes configuration to:

Fetch the remoteEntry.js from the specified URL.
Load the exposed Button module from within that remote entry.
This happens dynamically at runtime, allowing independent deployments!

Best Practices for Sharing

When defining your exposes and remotes, keep these tips in mind:

Clear Naming: Use descriptive names for your exposed modules (e.g., ./UserProfileCard).
Consistent Aliases: Ensure your remote aliases in the host are easy to understand (e.g., marketingApp).
Relative Paths: Use relative paths (./src/...) for exposed modules within the remote app.

Test Your Understanding

You've learned how to expose and consume modules. Let's check your understanding of the core configuration!

ตอบคำถามในบทเรียนแบบโต้ตอบ

Lesson Summary & Next Steps

Great job! You've learned the fundamental mechanics of sharing modules with Webpack Module Federation:

Exposing: Remote apps use exposes to make components public.
Consuming: Host apps use remotes to import and use those components.
This dynamic loading allows for independent development and deployment.

Next, we'll build a simple federated application from scratch, putting these concepts into practice!

เริ่มต้นได้ฟรี

เรียนรู้ JavaScript ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 12
บทเรียน: 48

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “การแชร์โมดูลและคอมโพเนนต์” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การแชร์โมดูลและคอมโพเนนต์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Micro Frontends Architecture with Module Federation ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Micro Frontends Architecture with Module Federation มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การแชร์โมดูลและคอมโพเนนต์”

เรียนรู้การเปิดเผยคอมโพเนนต์จากแอปพลิเคชันรีโมตและเรียกใช้คอมโพเนนต์เหล่านั้นในแอปพลิเคชันโฮสต์ คุณปฏิบัติ Micro Frontends Architecture with Module Federation ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Micro Frontends Architecture with Module Federation หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Micro Frontends Architecture with Module Federation บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “การแชร์โมดูลและคอมโพเนนต์” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Micro Frontends Architecture with Module Federation นี้ได้ไหม

ได้ บทเรียน Micro Frontends Architecture with Module Federation ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

การตั้งค่าโครงการและการกำหนดค่า
การแชร์โมดูลและคอมโพเนนต์
การสร้างแอปแบบสหพันธ์อย่างง่าย
การเรียกใช้และแก้ไขข้อบกพร่องของแอปแบบรวมภายในเครื่อง

← กลับไปที่ Micro Frontends Architecture with Module Federation