最新 umi4-max 如何使用 webpack5 聯邦模塊

来源:https://www.cnblogs.com/EnSnail/archive/2023/03/19/17234326.html
-Advertisement-
Play Games

新項目用 umi4-max 搭建，部分功能想要使用其他項目的功能，不想重新開發，想到了使用 webpack5 的聯邦模塊，可以直接引用其他項目代碼來實現共用代碼。 理想很美好，現實很殘酷。直接按照 webpack5 聯邦模塊的使用方法，並不能成功，而官方文檔沒有明確說明如何使用。 webpack 聯 ...


新項目用 umi4-max 搭建，部分功能想要使用其他項目的功能，不想重新開發，想到了使用 webpack5 的聯邦模塊，可以直接引用其他項目代碼來實現共用代碼。

理想很美好，現實很殘酷。直接按照 webpack5 聯邦模塊的使用方法，並不能成功，而官方文檔沒有明確說明如何使用。

webpack 聯邦模塊如何使用呢？

理解：

  • 使用場景：項目A有一個功能，項目B也想用。此時可以用。
  • 使用前提：依賴 webpack5，且主要依賴相同（如都依賴react)

說明：項目A需要用項目B的代碼，項目A為導入項目，項目B為導出項目。

相關配置欄位說明：

欄位名 類型 含義
name string 必傳值，即輸出的模塊名，被遠程引用時路徑為 name/{name}/name/
library string 聲明全局變數的方式，name 為 umd 的 name
filename string 構建輸出的文件名
remotes object 遠程引用的應用名及其別名的映射，使用時以 key 值作為 name
exposes object 被遠程引用時可暴露的資源路徑及其別名
shared object 與其他應用之間可以共用的第三方依賴，使你的代碼中不用重覆載入同一份依賴

1. 普通項目

1.1 導出項目

配置要導出的功能模塊

// 配置文件

const { ModuleFederationPlugin } = require("webpack").container;
const packageDeps = require('../package.json').dependencies

new ModuleFederationPlugin({
  name: "app1",
  filename: "remoteEntry.js",
  // 表示導出的模塊，只有在此申明的模塊才可以作為遠程依賴被使用。
  exposes: {
    "./CounterAppOne": "./src/components/CounterAppOne",
  },
  shared: {
    ...packageDeps,
    react: { singleton: true, eager: true, requiredVersion: deps.react },
    "react-dom": {
      singleton: true,
      eager: true,
      requiredVersion: deps["react-dom"],
    },
    "react-router-dom": {
      singleton: true,
      eager: true,
      requiredVersion: deps["react-router-dom"],
    },
  },
})

1.2 導入項目

配置要導入的功能模塊的文件地址

// 配置文件

const { ModuleFederationPlugin } = require("webpack").container;
const packageDeps = require('../package.json').dependencies

new ModuleFederationPlugin({
  name: "container",
  // 將其它項目的 name 映射到當前項目中
  remotes: {
    app1: 'app1@http://localhost:3001/remoteEntry.js',
  },
  // 是非常重要的參數，制定了這個參數，可以讓遠程載入的模塊對應依賴改為使用本地項目的 React 或 ReactDOM。
  shared: {
    ...packageDeps,
    react: { singleton: true, eager: true, requiredVersion: deps.react },
    "react-dom": {
      singleton: true,
      eager: true,
      requiredVersion: deps["react-dom"],
    },
    "react-router-dom": {
      singleton: true,
      eager: true,
      requiredVersion: deps["react-router-dom"],
    },
  },
})

react 項目中使用

// 通過 webpack 關聯其它應用，然後按需載入
const CounterAppOne = React.lazy(() => import("app1/CounterAppOne"))

export default () => {
  return (
  	<React.Suspense fallback={<div>Loading</div>}>
      <CounterAppOne />
    </React.Suspense>
  )
}

2. umi3 項目

2.1 導出項目

配置

// .umirc.ts

publicPath:'http://127.0.0.1:5502/',
webpack5: {}, // 開啟 webpack5 
chainWebpack: (config) => {
  config.output.publicPath('auto'); // 路徑處理，保證導入項目路徑正確

  const { ModuleFederationPlugin } = require("webpack").container;
  const packageDeps = require('./package.json').dependencies

  config.plugin('mf').use(ModuleFederationPlugin, [{
    name: "app1",
    filename: 'remoteEntry.js',
    exposes: {
      "./Test": '@/pages/test.tsx',
    },
    shared: { react: { eager: true }, "react-dom": { eager: true } },
  }])
  return config;
}

2.2 導入項目

安裝插件：yarn install umi-plugin-mf-bootstrap 支持入口非同步導入，以便支持使用 hooks。如果不安裝，會報錯 Uncaught Error: Shared module is not available for eager consumption。具體原因為：違背了 hooks 的使用規則，不能用兩個 React 實例。

插件內容：

import { IApi } from 'umi';
import { resolve } from 'path';
import { readFileSync } from 'fs';

export default (api: IApi) => {

  api.onGenerateFiles(() => {
    const buffer= readFileSync(resolve('./src/.umi/umi.ts'))
    const c = String(buffer)
    // console.log()
    api.writeTmpFile({
      path: 'index.ts',
      content: c,
    });
    api.writeTmpFile({
      path: 'umi.ts',
      content: 'import("./index")',
    });
  });
};

配置

// .umirc.ts

dynamicImport:{},
webpack5: {}, // 開啟 webpack5
chainWebpack: (config) => {
  const { ModuleFederationPlugin } = require("webpack").container;
  config.plugin('mf').use(ModuleFederationPlugin, [{
    name: "app2",
    remotes: {
      "app1": "app1@http://127.0.0.1:5502/dist/remoteEntry.js",
    },
    shared: { react: { eager: true }, "react-dom": { eager: true } },
  }])
  return config;
}

使用和普通項目一致

3. umi4-max 項目

按照 umi3 的方案，沒有成功。多方查閱摸索後，最終通過查閱官方 github 代碼，看到有個插件中有個 mf 的文件，閱讀代碼後，摸索出最終的方案了。

導出項目配置和 umi3 的一致，而導入項目只需按照下麵的配置即可，使用和普通項目一致。

// .umirc.ts

mf: {
  name: 'app2',
  remotes: [
    {
      name: 'app1',
      entry: 'http://127.0.0.1:5502/dist/remoteEntry.js'
    },
  ],
  shared: { react: { eager: true }, "react-dom": { eager: true } },
}

關於 mf 插件的詳細使用：可參考官方 github 代碼 Module Federation 插件，後來找到的。

其他相關實現：

  • 源碼 mf 插件實現 mf
  • 源碼 mfsu mf實現 MFImport

4. vite 項目

安裝插件 vite-plugin-federation

4.1 導出項目

配置

// vite.config.js 或 rollup.config.js

import federation from "@originjs/vite-plugin-federation";
export default {
  plugins: [
    federation({
      name: "remote-app",
      filename: "remoteEntry.js",
      // 需要暴露的模塊
      exposes: {
        "./Button": "./src/Button.vue",
      },
      shared: ["vue"],
    }),
  ],
};

4.2 導入項目

配置

// vite.config.js 或 rollup.config.js

import federation from "@originjs/vite-plugin-federation";
export default {
  plugins: [
    federation({
      name: "host-app",
      remotes: {
        remote_app: "http://localhost:5001/assets/remoteEntry.js",
      },
      shared: ["vue"],
    }),
  ],
};

react 項目中使用

// dynamic import
const myButton = React.lazy(() => import('remote/myButton'))

// static import
import myButton from 'remote/myButton'

備註：React 使用 federation 問題解決：

建議查看這個 Issue，裡面包含了大多數 React 相關的問題

常見問題：遠程模塊載入本地模塊的共用依賴失敗，報錯:

localhost/:1 Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: http:your url

原因：Vite 在啟動服務時對於 IP、Port 有自動獲取邏輯，在 Plugin 中還沒有找到完全對應的獲取邏輯，在部分情況下可能會出現獲取失敗。

解決：

在本地模塊顯式到聲明 IP、Port、cacheDir，保證我們的 Plugin 可以正確的獲取和傳遞依賴的地址。

// 本地模塊的 vite.config.ts

export default defineConfig({
  server:{
    https: "http",
    host: "192.168.56.1",
    port: 5100,
  },
  cacheDir: "node_modules/.cacheDir",
}

建議閱讀：

參考：


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一次.net code中的placeholder導致的高cpu診斷
    背景 最近一位朋友找到我，讓我幫看他們的一個aspnet core service無端cpu高的問題。從描述上看，這個service之前沒有出現過cpu高的情況，最近也沒有改過實際的什麼code。很奇怪了，會有什麼變化導致cpu上去了呢？ 分析 由於比較容易復現 (據說一啟動service，cpu就 ...
  • EF Core 如何應對高併發
    1、高併發的情況，時常會發生數據不穩定的情況 在看本節內容之前，請先看上一章SqlServer 高併發的情況下，如何利用鎖保證數據的穩定性 本節內容，也是具體討論如何在EF中實現這些操作 2、場景模擬，同上一章，搶券 EF 不考慮高併發的情況下，搶券代碼為： string _currOwner = ...
  • 【問題解決】Linux 下 VSCode IntelliSense 對 C 語言讀寫鎖類型報錯的問題
    如圖下圖所示，當我們想要使用 C 語言讀寫鎖類型時，IntelliSense 會提示如下未定義的錯誤： IntelliSense 提示錯誤 但是，如果忽略這些錯誤，直接 `gcc -o` 程式又沒有問題。通過查看頭文件 `pthread.h` 可知，要使用讀寫鎖類型，要定義巨集 `_GNU_SOURC ...
  • 第二章 - 進程
    2.1 進程的定義、組成、組織、特征： 2.1.1 進程的定義： 程式：一個指令序列 定義：進程是進程實體的運行過程，是系統進行資源分配和調度的一個獨立單位 單道程式： 一次只能處理一個程式，當該程式運行時，cpu、記憶體、I/O設備都要為它一個程式服務 程式的代碼放在程式段內，程式運行過程處理的數據 ...
  • 線上sql執行慢，分享3個優化案例
    前段時間，博主線上項目的幾個後端介面執行耗時達到了三、四秒鐘以上，查看介面代碼，發現 sql 語句執行過慢，於是開始分析 sql 執行 這裡把比較經典的優化案例分享給大家。 本文所講述 MySql 8.0+ 代碼演示地址：https://github.com/wayn111/newbee-mall- ...
  • MySQL如何正確查詢字元串長度
    前言 筆者最近有一個需求，需要將一段文字插入到備註欄位remark前面。 由於擔心插入後超過欄位長度的限制，所以需要統計線上數據，根據長度倒序查詢remark最長的一批數據看看長度。 剛開始百度了一下 MySQL如何查看欄位長度，看到了length()，於是就寫了這條sql： select leng ...
  • SQL server分頁的三種方法
    一、Entity Framework的Linq語句的分頁寫法： var datacount = test.OrderBy(t => t.testID) .Skip(pageSize * (pageIndex - 1)) .Take(pageSize).ToList(); 二、SQL Server分頁 ...
  • Vue——initEvents【六】
    前言 前面我們簡單的瞭解了 vue 初始化時的一些大概的流程，這裡我們詳細的瞭解下具體的內容; 內容 這一塊主要圍繞init.ts中的initEvents進行剖析，初始化生命周期之後緊接著。 initEvents initEvents的方法位於scr/core/instance/events.ts中 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類