Web コンポーネント/MFE をプレーンな静的 HTML と統合する-jsチュートリアル-php.cn

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

PHPz

リリース： 2024-08-25 06:44:06

オリジナル

832 人が閲覧しました

Integrate Web Component/MFE with plain static 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 ページを最新の状態に保つことができます。このアプローチは、最新のマイクロフロントエンドと既存のシステムを橋渡しするためのスケーラブルで効率的なソリューションを提供し、アーキテクチャのスムーズな移行と継続的な柔軟性を可能にします。