Vue Academy · レッスン

Vite Federation Plugin

@originjs/vite-plugin-federation、producer/consumerの設定、リモートの動的import

レッスン 3/413 ステップ

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

ViteでのFederation

Module FederationはWebpackで始まりましたが、多くのVueアプリはViteを使用します。コミュニティプラグインの@originjs/vite-plugin-federationを使うと、Viteベースのプロデューサーとコンシューマーでフェデレーションを利用できます。

プラグインのインストール

プロデューサーアプリ（リモート）とコンシューマーアプリ（ホスト）の両方に、このプラグインを追加します。

// terminal
// npm install -D @originjs/vite-plugin-federation

プロデューサーの設定

プロデューサー（リモート）のvite.config.tsに、nameと、公開名をローカルファイルに対応付けるexposesオブジェクトを含むfederationを追加します。

import federation from "@originjs/vite-plugin-federation"

export default {
  plugins: [
    federation({
      name: "remote_app",
      filename: "remoteEntry.js",
      exposes: {
        "./Widget": "./src/components/Widget.vue",
      },
    }),
  ],
}

Federationのビルド設定

このプラグインでは、最新のビルドターゲットが必要です。また、構成によってはモジュールのminifyを無効にする必要があります。動的インポートとトップレベルawaitが動作するように、ビルドターゲットを設定します。

export default {
  plugins: [federation({ /* ... */ })],
  build: {
    target: "esnext",
  },
}

exposesオブジェクト

Webpackと同様に、キーはコンシューマーが使用する公開インポートパスで、値はローカルのソースファイルへのパスです。他のチームが必要とするものだけを公開します。

exposes: {
  "./Widget": "./src/components/Widget.vue",
  "./useCart": "./src/composables/useCart.ts",
}

コンシューマーの設定

コンシューマー（ホスト）に、エイリアスをリモートのremoteEntry.jsのURLに対応付けるremotesオブジェクトを含むfederationを追加します。

import federation from "@originjs/vite-plugin-federation"

export default {
  plugins: [
    federation({
      name: "host_app",
      remotes: {
        remote_app: "https://remote.example.com/assets/remoteEntry.js",
      },
    }),
  ],
}

remotesのURL

値には、ビルド済みのremoteEntry.jsへの完全なURLを指定します。開発時はリモートのプレビューサーバーを、本番環境ではデプロイ済みCDNパスを指定します。

remotes: {
  remote_app: "https://remote.example.com/assets/remoteEntry.js",
}

共有依存関係

shared配列を追加し、ホストとリモートが共通ライブラリのコピーを1つだけ使うようにします。1つのVueインスタンスを維持するには、vueを記述することが不可欠です。

federation({
  name: "host_app",
  remotes: { /* ... */ },
  shared: ["vue", "pinia"],
})

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

エイリアスと公開名を組み合わせてインポートします。コードは実行時に取得されるため、defineAsyncComponentとともに動的インポートを使用します。

import { defineAsyncComponent } from "vue"

const Widget = defineAsyncComponent(() =>
  import("remote_app/Widget")
)

リモートの型宣言

TypeScriptはリモートモジュールの型を認識できません。インポートの型チェックが行われるように、型を宣言します。

// remotes.d.ts
declare module "remote_app/Widget" {
  import type { DefineComponent } from "vue"
  const component: DefineComponent
  export default component
}

リモートではDevではなくPreviewを使う

Federationにはビルド済みのremoteEntry.jsが必要ですが、Viteの開発サーバーは同じ形では生成しません。リモートをビルドし、vite previewで配信して、ホストが取得できるようにします。

// remote terminal
// vite build && vite preview --port 5001

クイックチェック

ViteのFederationプラグインについて、理解度を確認しましょう。

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

まとめ

ViteでのFederationを学びました：

@originjs/vite-plugin-federationによって、ViteでModule Federationを利用できます。
プロデューサーの設定では、nameと、公開名をローカルファイルに対応付けるexposesオブジェクトを指定します。
コンシューマーの設定では、エイリアスをリモートのremoteEntry.jsのURLに対応付けるremotesオブジェクトを指定します。
共有する依存関係（vueを含む）をsharedに列挙します。
動的なimport("alias/Module")で利用し、リモートをビルドしてvite previewで配信します。

無料で開始

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

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

コース: 42
レッスン: 156

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

よくある質問

「Vite Federation Plugin」レッスンは無料ですか？

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

「Vite Federation Plugin」で何を学びますか？

@originjs/vite-plugin-federation、producer/consumerの設定、リモートの動的import ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「Vite Federation Plugin」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Vue Academyに戻る