Micro Frontends Architecture with Module Federation · レッスン

Singletonモジュールとバージョニング

モジュールが1つのインスタンスだけ読み込まれるようにし、バージョンの競合を管理する方法を理解します。

レッスン 2/412 ステップ

「Singletonモジュールとバージョニング」はCoddyKit上の無料Micro Frontends Architecture with Module Federationレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはMicro Frontends Architecture with Module Federation学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Micro Frontends Architecture with Module Federationコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

What are Singleton Modules?

In Micro Frontend architectures, a singleton module is a piece of code or a library that should only ever exist as a single instance across your entire application, even if multiple Micro Frontends try to load it.

Think of it as a unique resource that all parts of your system need to share consistently.

Ensures a single source of truth.
Prevents conflicting states or behaviors.

Why Singletons Matter for MFEs

Imagine multiple Micro Frontends (MFEs) all loading their own copy of a UI library like React, or a state management library like Redux.

Without singletons, you could end up with:

Multiple instances of React Context, breaking component communication.
Separate Redux stores, leading to inconsistent application state.
Increased bundle size due to duplicate code.

Singletons solve these issues by guaranteeing a unified dependency.

Implementing Singletons with MF

Module Federation makes it easy to declare shared modules as singletons using the singleton: true option in your Webpack configuration.

When this is set, Webpack ensures that only one version of the specified module is loaded and used by all federated applications (hosts and remotes) at runtime.

Code: Configuring a Singleton

Here's how you'd configure a shared module, like react, to be a singleton in your webpack.config.js:

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

module.exports = {
  // ... other Webpack config
  plugins: [
    new ModuleFederationPlugin({
      name: 'host_app',
      remotes: {},
      shared: {
        react: {
          singleton: true, // Only one React instance allowed
          requiredVersion: '^18.0.0',
        },
        'react-dom': {
          singleton: true, // Only one ReactDOM instance allowed
          requiredVersion: '^18.0.0',
        },
      },
    }),
  ],
};

Understanding Shared Module Versioning

Beyond ensuring a single *instance* (singleton), you also need to manage which *version* of a shared module gets loaded.

What if one MFE needs React v17 and another needs React v18? Module Federation has mechanisms to handle these version conflicts and ensure compatibility or gracefully fail.

`requiredVersion` for Specificity

The requiredVersion option in the shared configuration allows you to specify the semantic version (semver) range that your application expects for a shared module.

Webpack will try to find a compatible version among the host and remote applications. If a compatible version is found, it's used. If not, it might load a fallback or throw an error, depending on other settings.

Code: Specifying Required Versions

Here's how you might define a requiredVersion for a shared library:

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

module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      // ...
      shared: {
        lodash: {
          singleton: false,
          requiredVersion: '^4.17.21', // Any version compatible with 4.17.21
        },
        moment: {
          singleton: true,
          requiredVersion: '2.29.1', // Exactly version 2.29.1
        },
      },
    }),
  ],
};

`strictVersion: true` for Strictness

While requiredVersion guides version selection, strictVersion: true enforces it rigorously.

If strictVersion: true is enabled and a remote module requests a version that is incompatible with the host's requiredVersion (or the version already loaded), Module Federation will throw an error and prevent the application from loading. This prevents unexpected behavior from version mismatches.

Code: Enforcing Strict Versioning

Combining singleton, requiredVersion, and strictVersion for critical dependencies:

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

module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      // ...
      shared: {
        react: {
          singleton: true,
          requiredVersion: '^18.0.0',
          strictVersion: true, // Fail if versions are incompatible
        },
        // ... other shared modules
      },
    }),
  ],
};

Best Practices for Shared Dependencies

To effectively manage singleton modules and versioning:

Use Semantic Versioning (SemVer): Adhere to major.minor.patch for all shared modules.
Communicate: Ensure teams are aware of shared module updates and version requirements.
Test Compatibility: Regularly test your federated applications to ensure shared modules work across all remotes and hosts.
Be Strategic: Not all shared modules need to be singletons or have strict versioning. Apply these settings thoughtfully based on the module's criticality.

Quick Check: Singleton & Versioning

When configuring shared modules in Module Federation, what are the primary benefits of using singleton: true and strictVersion: true?

対話的なレッスンで答える

Recap & Next Steps

You've now learned about singleton modules and versioning in Module Federation!

Singleton modules ensure only one instance of a shared dependency exists across your federated application, crucial for stateful libraries.
The requiredVersion and strictVersion options help manage compatibility and prevent issues arising from conflicting module versions.

These techniques are vital for building robust and predictable Micro Frontend applications.

無料で開始

AI チューターと学ぶ JavaScript — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 12
レッスン: 48

無料で学習を始めるコース全体を表示

よくある質問

「Singletonモジュールとバージョニング」レッスンは無料ですか？

はい。「Singletonモジュールとバージョニング」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Micro Frontends Architecture with Module Federationコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Micro Frontends Architecture with Module Federationコースには全4レッスンが含まれています。

「Singletonモジュールとバージョニング」で何を学びますか？

モジュールが1つのインスタンスだけ読み込まれるようにし、バージョンの競合を管理する方法を理解します。ブラウザで直接実行するハンズオンコードでMicro Frontends Architecture with Module Federationを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Micro Frontends Architecture with Module Federationを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのMicro Frontends Architecture with Module Federationは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「Singletonモジュールとバージョニング」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このMicro Frontends Architecture with Module Federationレッスンでコードを書いて実行できますか？

はい。すべてのMicro Frontends Architecture with Module Federationレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Micro Frontends Architecture with Module Federationに戻る