webpack 5連邦モジュール紹介の詳細

3774 ワード
webpack 5 連邦モジュール
本論文では主にwebpack 5の新しい特性の一つである「module federsation」（連邦モジュール）を紹介します。連邦モジュールの特性、使用方法、適用範囲を含みます。
特性
Wibpack 5は、より良い共有コードのために連邦モードを導入する。その前にコードを共有します。普通はnpmで発注して解決します。npmの発注には構築、リリース、引用の3段階が必要ですが、連邦モジュールは直接に他のアプリケーションコードを引用して、熱挿抜効果を実現できます。npmの方式に比べてもっと簡潔で速くて便利です。
使い方
  • リモートjs
    • を導入する。
  • webpack構成
  • モジュール使用
    • リモートJSの導入
    アプリ1、アプリ2、ポートはそれぞれ3001、3002があると仮定します。app 1アプリケーションはapp 2の中のjsを引用したいなら、直接scriptタグを使えばいいです。
    例えば、app 1アプリケーションにindex.を導入してap 2アプリケーションremoteEntry.jsを導入します。
    
<head>
  <script src="http://localhost:3002/remoteEntry.js"></script>
 </head>
    webpack配置
    app 1のwebpack構成：
    
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
  
module.exports = {
 //....
 plugins: [
  new ModuleFederationPlugin({
   name: "app1",
   library: { type: "var", name: "app1" },
   remotes: {
    app2: "app2",
   },
   shared: ["react", "react-dom"],
  }),
 ],
};
    アプリ2に対するwebpackの構成は以下の通りです。
    
plugins: [
  new ModuleFederationPlugin({
   name: "app2",
   library: { type: "var", name: "app2" },
   filename: "remoteEntry.js",
   exposes: {
    "./Button": "./src/Button",
   },
   shared: ["react", "react-dom"],
  })
 ],
    アプリ1とap 2の構成は基本的に同じで、ap 2を超えるとfilenameとexposes以外が見られます。
    パラメータ解釈
  • nameアプリケーション名は、全体的に唯一、衝突してはいけません。
  • libraryです。UMD標準はエクスポートして、nameと一致すればいいです。
  • Remotes宣言は、参照される遠隔アプリケーションを必要とする。上記のように、app 1は、必要なリモートアプリケーションap 2を構成しています。
  • filename遠隔アプリケーション時に他のアプリケーションによって導入されたjsファイル名。上記のremoteEntry.js
    • に対応します。
  • exposes遠隔アプリケーションにより露出されたモジュール名。
  • shared依存のカバン。
  • この属性が設定されている場合。webpackはローディング時に、ローカルアプリケーションに対応するパケットがあるかどうかを先に判断します。存在しない場合は、リモートアプリケーションの依存パケットをロードします。
  • はapp 2として、リモートアプリケーションであるため、「react」「react-dom」が配置されていますが、app 1によって消費されていますので、webpackはまず、ap 1が存在するかどうかを調べます。アプリ1でもこの二つのパラメータを説明しました。アプリ1はローカルアプリケーションですので、直接にアプリ1の依存を使います。
    • モジュールの使用
    アプリ1/App.jsコードに対してap 2のコンポーネントを使用すると、コードは以下の通りです。
    
import React from "react";

const RemoteButton = React.lazy(() => import("app2/Button"));

const App = () => (
 <div>
  <h1>Basic Host-Remote</h1>
  <h2>App 1</h2>
  <React.Suspense fallback="Loading Button">
   <RemoteButton />
  </React.Suspense>
 </div>
);

export default App;
    具体的な行
    
const RemoteButton = React.lazy(() => import("app2/Button"));
    使用方法は、import('長距離アプリケーション名/露出されたモジュール名')で、webpack構成の中のnameとexposeに対応します。使用方法と一般的な非同期コンポーネントの導入に差はない。
    適用範囲
    shareという属性が存在するため、ローカルアプリケーションとリモートアプリケーションの技術スタックとバージョンは互換性があり、同じセットで統一して使用する必要があります。例えば、jsはreact、cssはsassなどを使います。
    連邦モジュールとマイクロ先端の関係：exposeという属性は単一のコンポーネントを暴露してもいいし、アプリケーション全体を暴露してもいいです。同時にshare属性が存在するため、技術スタックは一致しなければならない。したがって、ルーティングを加えると、single−spaのようなモードのマイクロフロントエンドを実現するために使用することができる。
    使用シーン：専用のコンポーネントアプリケーションサービスを新設して、すべてのコンポーネントとアプリケーションを管理します。他のトラフィック層は自分の業務の必要に応じて対応するコンポーネントと機能モジュールをロードするだけでいいです。モジュール管理の統一管理、コード品質が高く、構築速度が速い。行列アプリや、ページの構築などを特別に適用します。

    例のgithubアドレス
    ここでwebpack 5連邦モジュールについて詳しく紹介した文章をここに紹介します。もっと関連するwebpack 5連邦モジュールの内容は以前の文章を検索してください。または下記の関連記事を引き続き閲覧してください。これからもよろしくお願いします。
    vue-resizeの具体的な使い方を深く解読します。
    mysqlの運行権限のためにDiscuzを見つけられませんでした。フォーラムのデータテーブルの解決方法