いくつかのマイクロ フロントエンド反応アプリケーションがあります。 すべてのアプリケーションはテクノロジーに依存しません。これは、すべてのアプリケーションが依存関係として任意のライブラリを持つことができることを意味します。 彼らは webpack モジュールユニオンプラグインを使用しています。他のマイクロ フロントエンド アプリケーションのバージョンが同じ場合、依存関係は共有されます。
マイクロ フロントエンド アプリケーションは、メイン マイクロ フロントエンド アプリケーションとサブマイクロ フロントエンド アプリケーションといういくつかのグループに分類されます。 メイン アプリケーションは、他のサブアプリケーションのコンテナーです。同時に実行できるサブアプリケーションは 1 つだけです。
当社には、React コンポーネントを備えた UI-Kit があります。ライブラリには、CSS 変数、グローバル セレクター (* {/* CSS ルール */}) が含まれています。
サブアプリケーションは、依存関係として UI-Kit を持つことができます。 UI-Kit のバージョンが異なる場合、サブアプリケーションの 1 つが間違ったスタイルを適用する可能性があります。 ワークフロー (仕組み): ブラウザーでメイン アプリを開き、webpack がメイン アプリの最初のページのすべてのリソース (JS、CSS、フォント) を読み込みます。その後、サブアプリ 1 を使用してページを開き、webpack がサブアプリ 1 のリソースをロードしてドキュメントに挿入します (CSS スタイルはドキュメントの先頭に挿入されます)。 私たちの UI キットには CSS モジュールがありますが、クラスの名前は CSS ルールの内容に基づいて作成されないため、これでは十分ではありません。さらに、CSS 変数はいずれかのバージョンで変更される可能性があります。さらに、サブアプリケーションは UI-Kit を使用しない場合がありますが、UI-Kit 内のすべての * CSS ルールがサブアプリケーションに適用されます。さらに、2 つのサブアプリケーションは同じライブラリの異なるバージョンを使用でき、ライブラリはグローバル CSS またはモジュール CSS を使用できます。
各マイクロ フロントエンド アプリケーションに完全な CSS 分離を適用する必要があります。
前回は、完全な CSS 分離をサポートするシャドウ DOM を適用しようとしました。ただし、ライブラリの 1 つ (cytoscapejs またはそのプラグイン) は document.getElementById メソッドを呼び出します。探している要素がすでにシャドウ ルートにあるため、null が返されます。私はその事件を調査中です。
その前に、UI-Kit の CSS モジュール クラスの最後にバージョンを追加することを検討しました。ただし、CSS 変数の名前が一意になるわけではありません。 また、マイクロ フロントエンド アプリのビルド内から外部ライブラリの CSS クラスの名前を変更することはできないと思います。
さらに、スタイル ローダーでは、「use」メソッドと「unuse」メソッドを使用してスタイル タグを追加および削除できることもわかっています。これを使用すると、2 つのサブアプリケーションのスタイルが上書きされるのを防ぐことができます。ただし、mini-css-extract-plugin にはこの機能がありません。
:has セレクターと :not セレクターを使用してみることもできますが、さまざまな CSS 状況 (* セレクター、CSS 変数など) を扱いたくありません。これは間違ったアプローチだと思います。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
PostCss Prefix Wrap プラグイン をチェックしてください。このプラグインは、CSS プレフィックス スタイルにセレクターを追加して、あるマイクロ フロントエンドから別のマイクロ フロントエンドへの CSS の漏洩を防ぎます。
プラグインを使用するには、プラグインをインストールし、次のように webpack.config を拡張します:
リーリー#mfe_id_ 命名に従って、同じ ID を MFE の最上位の要素に追加してください。
＃＃＃アドバンテージ＃＃＃
実装が簡単で、ネストされた CSS ルールでも機能します。
PostCSS が必要です。