0Pricing
Micro Frontends Architecture with Module Federation · 课时

共享模块与组件

学习将组件从远程应用中暴露出来，并在宿主应用中使用这些组件。

共享模块与组件 是 CoddyKit 上的免费 Micro Frontends Architecture with Module Federation 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 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!

常见问题解答

「共享模块与组件」课时是免费的吗？

是的 — 「共享模块与组件」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Micro Frontends Architecture with Module Federation 课程的其余内容，请升级到 CoddyKit PRO。 Micro Frontends Architecture with Module Federation 课程共包含 4 节课。

「共享模块与组件」这节课中我会学到什么？

学习将组件从远程应用中暴露出来，并在宿主应用中使用这些组件。 你通过在浏览器中直接运行的动手代码来练习 Micro Frontends Architecture with Module Federation，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Micro Frontends Architecture with Module Federation 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Micro Frontends Architecture with Module Federation 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。

「共享模块与组件」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Micro Frontends Architecture with Module Federation 课中编写并运行代码吗？

能。每节 Micro Frontends Architecture with Module Federation 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 项目创建与配置
  2. 共享模块与组件
  3. 构建简单的联邦化应用
  4. 在本地运行和调试联邦应用
← 返回 Micro Frontends Architecture with Module Federation