モジュールフェデレーション Vite を使用した Monorepo とマイクロフロントエンド-jsチュートリアル-php.cn

モジュールフェデレーション Vite を使用した Monorepo とマイクロフロントエンド

Mary-Kate Olsen

リリース： 2025-01-08 18:36:41

オリジナル

1011 人が閲覧しました

Monorepo and Micro-Frontends Using Module Federation Vite

✨はじめに✨:

モノレポ

モノリポジトリは、複数の関連する独立したプロジェクトを管理する単一のリポジトリです。個別のリポジトリと比較して、コードの再利用を可能にし、依存関係を簡素化し、チームのコラボレーションを促進することで開発を合理化します。

マイクロフロントエンド

フロントエンドを個別に展開可能な小さな独立したユニットに分解する、フロントエンドの Web アプリケーションアーキテクチャ。マイクロフロントエンドは、他のコードベースから独立して作成およびデプロイできるため、柔軟性とスケーラビリティが向上します。

モジュールフェデレーションとVite

モジュールフェデレーション: これは Webpack の非常に強力な機能で、リモートの場所からのコードの動的な読み込みを可能にします。

Vite: これは、より最新のフロントエンドビルドツールであり、開発サーバーの高速起動と即時のホットモジュール交換を可能にし、最新の JavaScript 機能を強力にサポートし、プラグインシステムによってその機能を拡張します。 .

これらのツールで解決できる問題?:

チームのスケーリング
依存関係の管理
開発スピードの向上

これらのパターンとツールを組み合わせることで、現代の Web 開発の要求を満たす、スケーラブルで保守性の高い、高性能のフロントエンドアプリケーションを構築できます。

Monorepos、Micro-Frontends、Module Federation、Vite の組み合わせ ??:

インパクト

これらのテクノロジーを組み合わせることで、大規模で複雑な Web アプリケーションを構築するための強力で柔軟なアーキテクチャを作成できます。主な影響の内訳は次のとおりです:

拡張されたスケーラビリティ: モノリポジトリ内でのマイクロフロントエンドの独立したデプロイと更新。
開発者エクスペリエンスの向上: Vite による開発の高速化とワークフローの合理化。
最適化されたパフォーマンス: モジュールフェデレーションによるコードのオンデマンド読み込みにより、初期読み込み時間が短縮されます。
保守性の向上: モジュール式マイクロフロントエンドにより、コード構成が改善され、結合が減少します。

??この理論はこれくらいにして、実際のアクションを見てみましょう。 ??

やり方は？

1: モノリポジトリのセットアップ

Lerna や Nx などのモノリポジトリ管理ツールを選択します。 (このデモプロジェクトでは Nx を選択しましょう)

フォルダーを作成し、そこに Nx ワークスペースを初期化しましょう。

mkdir my-monorepo
cd my-monorepo

ログイン後にコピー

2: Nx Cl をインストールします。

Nx CLI をシステムにグローバルにインストールします

npm add --global nx@latest

ログイン後にコピー

Nx ワークスペースを初期化します

npx create-nx-workspace@latest

ログイン後にコピー

Nx CLI を使用して、ワークスペース内に新しいアプリケーションとライブラリを生成します

nx g @nx/next:application host-app
.
.
.
nx g @nx/react:application my-remote-app
.
.
.
nx g @nx/react:library my-utils

ログイン後にコピー

3: Vite を構成し、モジュールフェデレーションを実装します。

各マイクロフロントエンドの vite.config.js に @originjs/vite-plugin-federation プラグインをインストールします。

npm i @originjs/vite-plugin-federation -D

ログイン後にコピー

vite.config.js を作成し (Nx によって作成されていない場合)、設定します。
モジュールフェデレーションパッケージを実装します。

ホストとアプリの Vite 構成:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
     react(),
     federation({
      name: 'host-app',
      remoteApp: {},  // add Urls of your remote apps here
     shared: {
        react: {
          singleton: true,
          requiredVersion: '18.2.0',
        },
        'react-dom': {
          singleton: true,
          requiredVersion: '18.2.0',
        },
      },
    }),
  ],
});

ログイン後にコピー

リモートアプリ Vite 構成:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
     react(),
     name: 'my-remote-app', // unique app name for your remote module
     filename: 'remoteEntry.js',
     exposes: {}, // add the path of any components you want to expose to the host app
     shared: {
       react: {
         singleton: true,
         requiredVersion: '18.2.0',
       },
       'react-dom': {
         singleton: true,
         requiredVersion: '18.2.0',
       },
     },
    }),
  ],
});

ログイン後にコピー

プロジェクトの構造は次のようになります

my-monorepo/
├── apps/
│   ├── host-app/
│   │   ├── package.json
│   │   ├── vite.config.js
│   │   ├── src/
│   │   └── ...
│   ├── my-utils/
│   │   ├── package.json
│   │   ├── src/
│   │   └── ...
│   └── my-remote-app/
│       ├── package.json
│       ├── vite.config.js
│       ├── src/
│       └── ...
└── nx.json

ログイン後にコピー

?おめでとうございます。アプリの構成が完了しました。 ?
次に、コンポーネントを作成してホストアプリに公開します。

リモートコンポーネントをホストに追加するにはどうすればよいですか?

コンポーネントを「AppComponent」として公開し、リモート名が「remoteApp」であると仮定します

const RemoteComponent = React.lazy(() => import('remoteApp/AppComponent'));

<Suspense fallback={<>Loading....</>}>
  <RemoteComponent />
</Suspense>

ログイン後にコピー

*注: * ホストの vite.config.js ファイルにリモート URL を必ず追加してください。

現実世界のシナリオ ??:

大規模な e コマースプラットフォーム: 同じチームが商品ページ、チェックアウトプロセス、ユーザーアカウントに個別に取り組むことができます。
エンタープライズアプリケーション: 共有プラットフォーム内のさまざまな部門が機能を管理できます。
さまざまなチームが個別のウィジェットやダッシュボードを作成および管理できます。

?ここで私のデモプロジェクトコードをチェックしてください ??: Monorepo プロジェクト