Синтаксис удаленного свойства ModuleFederationPlugin

Question

Что делает этот ui: "ui@http://some.external.host/remoteEntry.js" синтаксис означает в ModuleFederationPlugin remotesсвойство. Я понимаю, что элемент пользовательского интерфейса загружается с внешнего хоста, но что делает 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 иметь следующие конфигурации веб-пакетов для объединения модулей:

      // 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-адрес, по которому вы найдете сценарий удаленного контейнера.