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

導入

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

はじめる

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

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

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

// with a Webpack 4 config like:
config.entry = { entryName: 'entry-file.js' };
config.output.filename = '[name].[contenthash:8].js';

// Add to plugins
new ImportMapWebpackPlugin({
    filter: x => {
        return ['entryName.js'].includes(x.name);
    },
    transformKeys: filename => {
        if (filename === 'entryName.js') {
            return 'mfe-module/out-file';
        }
    },
    fileName: 'import-map.json',
    baseUrl: 'https://super-cdn.com/'
});
// output import-map.json
{
    "imports": {
        "mfe-module": "https://super-cdn.com/entryName.12345678.js"
    }
}

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

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

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

<script src="https://cdn.jsdelivr.net/npm/systemjs/dist/system.min.js"></script>

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

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

<script type="systemjs-importmap" src="/path/to/module-importmap.json">

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

<script crossorigin type="systemjs-importmap" src="/path/to/import-map.json">

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

{
    "imports": {
        "mfe-module": "https://super-cdn.com/entryName.12345678.js"
    }
}

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

<script crossorigin>
    System.import('mfe-module');
</script>

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

//web component
<mfe-module/>
//some regular HTML tag that is bootstrapped.
<div id="mfe-module" />

結論

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

ここまでたどり着いたということは、読み続けていただくために十分な努力をしたということになります。コメントを残していただくか、修正を依頼してください。

私の他のブログ:

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

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