ModuleFederationPlugin 的远程属性语法

Question

这个 ui: "ui@http://some.external.host/remoteEntry.js" 语法在 ModuleFederationPlugin 的 remotes 属性中是什么意思。我知道 ui 项是从外部主机加载的，但是主机定义之前的 ui@ 是什么意思？

new ModuleFederationPlugin({
      name: "myApp",
      filename: "myAppEntry.js",
      remotes: {
        ui: "ui@http://some.external.host/remoteEntry.js",
      },
      shared: {
        ...,
      },
    }),

Answer 1

您可以将配置 ui: "ui@http://some.external.host/remoteEntry.js" 的这一行分成三部分：LocalModuleName: "RemoteModuleName@Host"。假设 myApp 和 ui 具有以下用于模块联合的 webpack 配置：

// Config for myApp
new ModuleFederationPlugin({
  name: "myApp",
  filename: "myAppEntry.js",
  remotes: {
    ui: "ui@http://some.external.host/remoteEntry.js",
  },
  shared: {...},
}),

// Config for ui
new ModuleFederationPlugin({
  name: "ui",
  filename: "remoteEntry.js",
  exposes: {
    "./Button": "./src/Button",
  },
  shared: {...},
}),

LocalModuleName 是您可以在本地代码中从远程应用程序导入公开功能的名称，例如：

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

但您也可以将名称更改为 remoteUI: "ui@http://some.external.host/remoteEntry.js" 并且导入必须如下所示：

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

如果两个不同的遥控器在其配置中使用相同的名称，这可能会很有用。

RemoteModuleName指远程配置中使用的名称。这是必要的，因此 ModuleFederation 可以正确初始化模块。

主机是您在其下找到远程容器脚本的URL。

ModuleFederationPlugin 的远程属性语法

ModuleFederationPlugin's remote property syntax

webpack-module-federation

ModuleFederationPlugin 的远程 属性 语法

ModuleFederationPlugin's remote property syntax

webpack-module-federation

ModuleFederationPlugin 的远程属性语法