![Integrate Web Component/MFE with plain static HTML](https://img.php.cn/upload/article/000/000/000/172453944834333.jpg)
導入
理想的な世界では、最新の技術スタックが従来のシステムと統合されるハイブリッド ソリューションは必要ありません。しかし、私たちは本当に理想的な世界に住んでいるのだろうか?!多くの場合、私はハイブリッド アプローチを実装する必要があることに気づきました。マイクロフロントエンド (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 サイトの他の関連記事を参照してください。