1

这个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: {
        ...,
      },
    }),
4

1 回答 1

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可以正确初始化模块。

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

于 2021-03-16T20:28:26.090 回答