Vue Academy · レッスン

VueでのWebpack Module Federation

ModuleFederationPlugin、exposes、remotes、共有依存関係、リモートコンポーネントの読み込み

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

WebpackにおけるModule Federation

Webpack 5にはModule Federationが組み込まれています。あるビルドが他のビルドにモジュールを公開し、実行時にそれらのモジュールを利用できるようにします。これはランタイムのマイクロフロントエンドの基盤です。

ホストとリモート

役割は2つあります。リモートはコンポーネントを公開し、ホストはそれを利用します。1つのアプリが両方の役割を担うこともできます。ホストはビルド時ではなく、実行時にHTTP経由でリモートのコードを読み込みます。

ModuleFederationPlugin

webpackのplugins配列にModuleFederationPluginを追加して、フェデレーションを設定します。そのオプションで、名前、公開するもの、利用するもの、共有する依存関係を定義します。

const { ModuleFederationPlugin } = require("webpack").container

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: "checkout",
    }),
  ],
}

nameオプション

nameは、このビルドを識別する一意なグローバル識別子です。ホストはこの名前でリモートを参照します。

new ModuleFederationPlugin({
  name: "checkout",
  filename: "remoteEntry.js",
})

exposesオプション（リモート）

リモートは、exposesに共有するモジュールを列挙します。キーは公開パス、値はローカルファイルのパスです。

new ModuleFederationPlugin({
  name: "checkout",
  filename: "remoteEntry.js",
  exposes: {
    "./CartButton": "./src/components/CartButton.vue",
  },
})

remoteEntryマニフェスト

リモートは、公開するモジュールを記述したremoteEntry.jsマニフェストをビルドします。ホストはこのファイルを読み込み、実行時にリモートのコードを発見して取得します。

// host loads: https://checkout.example.com/remoteEntry.js

remotesオプション（ホスト）

ホストは、remotesに利用するリモートを宣言します。ローカルのエイリアスを、リモートの名前とそのremoteEntry.jsのURLに対応付けます。

new ModuleFederationPlugin({
  name: "shell",
  remotes: {
    checkout: "checkout@https://checkout.example.com/remoteEntry.js",
  },
})

sharedオプション

sharedには、2つの側で共有して2つのコピーが読み込まれるのを防ぐ依存関係を列挙します。Vueのようなフレームワークは、すべてのマイクロフロントエンドが1つのインスタンスを使うように、共有する必要があります。

new ModuleFederationPlugin({
  name: "shell",
  remotes: { /* ... */ },
  shared: ["vue"],
})

Vueのsingleton: true

Vueは、ページ内にコピーが1つだけ存在するシングルトンにする必要があります。Vueのインスタンスが2つあると、リアクティビティとコンポーネントの同一性が壊れます。バージョン要件とともにsingletonとして指定します。

shared: {
  vue: {
    singleton: true,
    requiredVersion: "^3.4.0",
  },
}

リモートコンポーネントの利用

実行時にリモートモジュールを動的にインポートします。ネットワーク経由で読み込むため、動的なimport()を使用します。Vueでは通常、defineAsyncComponentでラップします。

import { defineAsyncComponent } from "vue"

const CartButton = defineAsyncComponent(() =>
  import("checkout/CartButton")
)

リモートのレンダリング

非同期コンポーネントを、テンプレート内で他のコンポーネントと同じように使用します。Webpackは初回のレンダリング時にリモートのコードを取得し、キャッシュします。

<template>
  <header>
    <CartButton />
  </header>
</template>

クイックチェック

VueでのModule Federationについて、理解度を確認しましょう。

まとめ

WebpackのModule Federationを学びました：

ModuleFederationPluginでフェデレーションを設定し、nameでビルドを識別します。
リモートはexposesを列挙し、remoteEntry.jsマニフェストを生成します。
ホストはremotesに、エイリアスとname@URL/remoteEntry.jsの対応を記述します。
sharedで依存関係の重複を防ぎ、Vueにはsingleton: trueが必要です。
動的なimport("remote/Module")でリモートを利用します。多くの場合、defineAsyncComponentと組み合わせます。

よくある質問

「VueでのWebpack Module Federation」レッスンは無料ですか？

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

「VueでのWebpack Module Federation」で何を学びますか？

ModuleFederationPlugin、exposes、remotes、共有依存関係、リモートコンポーネントの読み込みブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

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

「VueでのWebpack Module Federation」レッスンにはどのくらい時間がかかりますか？

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

このVue Academyレッスンでコードを書いて実行できますか？

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

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

← Vue Academyに戻る