Web コンポーネント/MFE をプレーンな静的 HTML と統合する

導入

理想的な世界では、最新の技術スタックが従来のシステムと統合されるハイブリッド ソリューションは必要ありません。しかし、私たちは本当に理想的な世界に住んでいるのだろうか?!多くの場合、私はハイブリッド アプローチを実装する必要があることに気づきました。マイクロフロントエンド (MFE) と、モジュール フェデレーションがいかに素晴らしいソリューションであるかについては、ほとんどの人が聞いたことがあると思います。しかし、動的なバージョンの更新を気にせずに、MFE をプレーンな静的 HTML ページと統合する方法をご存知ですか?言い換えれば、MFE が変更されるたびにコンシューマー HTML ページを更新しないようにするにはどうすればよいでしょうか?あなたの人生を（良い方向に？）変えるかもしれない、いくつかの簡単なコード変更について説明します。

はじめる

SystemJS ライブラリを使用すると、Web コンポーネントまたは MFE をシームレスに統合したり、実行時にモジュールをインポートしたりすることもできます。

ステップ 1: モジュールをマップとしてエクスポートする

まず、Webpack などのモジュール バンドラーを使用して、モジュールを JSON 形式のマップとしてエクスポートします。 webpack-import-map-plugin を使用すると、インポート マップ ファイルを簡単に生成できます。

リーリー

注: 上記のコード スニペットは webpack-import-map-plugin リポジトリから取得されています

ステップ 2: SystemJS をロードする

次に、SystemJS ファイルを通常の JavaScript ファイルとしてインポートして読み込みます。 s.min.js のファイル バージョンを独自の CDN でホストすることも、ホストされている既存のファイル バージョンを使用することもできます。

リーリー
ステップ 3: マップ JSON ファイルをインポートする

次に、マップ JSON ファイルをインポートして、モジュールを HTML ページに統合できるようにします。インポート マップにより、JS ファイル パスをハードコーディングする必要がなくなり、コンシューマ コードを変更することなくインポートされたモジュールを更新できるようになります。

リーリー

注: 別のオリジンからロードする場合は、crossorigin 属性を使用します。

リーリー

マップファイルのインポート例:

リーリー
ステップ 4: モジュールをロードする

この時点で、SystemJS がロードされ、MFE/Web コンポーネント モジュールがインポートされています。さて、モジュールをロードします:

リーリー
インポートしたら、Web コンポーネントであるか、ブートストラップされた通常の HTML タグであるかに基づいて、モジュールを呼び出すことができます。

リーリー
結論

これらの手順に従うことで、頻繁な更新やバージョン管理を心配することなく、マイクロフロントエンドや Web コンポーネントをレガシー システムにシームレスに統合できます。 SystemJS とインポート マップを使用すると、モジュールを動的にロードして管理できるため、最小限の労力で静的 HTML ページを最新の状態に保つことができます。このアプローチは、最新のマイクロ フロントエンドと既存のシステムを橋渡しするためのスケーラブルで効率的なソリューションを提供し、よりスムーズな移行とアーキテクチャの継続的な柔軟性を可能にします。

ここまでたどり着いたなら、私はあなたが読み続けるために満足のいく努力をしました。コメントを残していただくか、修正を依頼してください。

私の他のブログ:

ページの読み込み時間を短縮する方法 - パート 1

• パフォーマンスへの影響を防ぐために、Spring RestTemplate のデフォルト実装を回避します
• Web コンポーネントに関する私の直接の経験 - 学びと限界
• マイクロフロントエンド意思決定フレームワーク
• Postman ツールを使用して SOAP Web サービスをテストする

以上がWeb コンポーネント/MFE をプレーンな静的 HTML と統合するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。