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

✨はじめに✨:

モノレポ

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

マイクロフロントエンド

フロントエンドを個別に展開可能な小さな独立したユニットに分解する、フロントエンドの 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 プロジェクト

結論

Monorepos、マイクロフロントエンド、モジュールフェデレーション、Vite は、上記すべてのテクノロジーの強みを利用して、組織が現代の開発とビジネスのニーズを満たす、スケーラブルで保守性の高い高性能の Web アプリケーションを構築するのに役立ちます。

追加のリソース:

Nx ドキュメント
Vite ドキュメント
Webpack モジュール フェデレーション
マイクロフロントエンドアーキテクチャ

ご質問がある場合や、プロジェクトにこの設定を実装する際にサポートが必要な場合はお気軽にお問い合わせください。素晴らしいものを作りましょう! ?

以上がモジュールフェデレーション Vite を使用した Monorepo とマイクロフロントエンドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。