webpack-module-federation - 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"));

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

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

Host 是您可以在其中找到远程容器脚本的 URL。