• 最新 umi4-max 如何使用 webpack5 联邦模块


    新项目用 umi4-max 搭建,部分功能想要使用其他项目的功能,不想重新开发,想到了使用 webpack5 的联邦模块,可以直接引用其他项目代码来实现共享代码。

    理想很美好,现实很残酷。直接按照 webpack5 联邦模块的使用方法,并不能成功,而官方文档没有明确说明如何使用。

    webpack 联邦模块如何使用呢?

    理解:

    • 使用场景:项目A有一个功能,项目B也想用。此时可以用。
    • 使用前提:依赖 webpack5,且主要依赖相同(如都依赖react)

    说明:项目A需要用项目B的代码,项目A为导入项目,项目B为导出项目。

    相关配置字段说明:

    字段名 类型 含义
    name string 必传值,即输出的模块名,被远程引用时路径为 name/{name}/name/{expose}
    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>Loadingdiv>}>
          <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",
    }
    

    建议阅读:

    参考:

  • 相关阅读:
    springcloud分布式架构网上商城(java项目源码+文档)
    780. 到达终点;2360. 图中的最长环;1871. 跳跃游戏 VII
    倍福PLC和C#通过ADS通信传输String类型
    字典常用方法
    Cesium 修改鼠标样式
    什么是人工智能(AI)数据平台?
    P8813 [CSP-J 2022] 乘方
    如何快速免费的给PDF文件加密呢
    爬虫篇-如何下载selenium及其适配谷歌浏览器插件chromedriver(含chrome各版本及下载地址)
    Unity中的场景加载
  • 原文地址:https://www.cnblogs.com/EnSnail/p/17234326.html