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

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