Как избежать усложнения конфигурации из-за объединения модулей?

Question

Глядя на новую федерацию модулей, доступную в webpack 5, это фантастически работает в сценариях разработки, но приводит к конфигурации, подобной приведенному ниже примеру.

Есть ли лучший способ справиться с этим?

webpack.config.js

      const searchSource = process.env.SEARCH ? "http://localhost:3001" : "http://search.mydomain.com";
const marketplaceSource = process.env.MARKETPLACE ? "http://localhost:3002" : "http://marketplace.mydomain.com";

package.json

      scripts: {
    "develop-search": "cross-env SEARCH=true webpack serve --mode=development",
    "develop-marketplace": "cross-env MARKETPLACE=true webpack serve --mode=development",
}

Answer 1

Я все еще экспериментирую, но могу поделиться тем, что мы делаем. Сначала мы создаем отдельную конфигурацию для сопоставления разных URL-адресов:

federationRemotes.json:

      {
    "app1": {
        "prod": "https://app1.domain.com/remoteEntry.js",
        "stage": "https://app1-stage.domain.com/remoteEntry.js",
        "local": "http://localhost:3000/remoteEntry.js"
    },
    "app2": {
        "prod": "https://app2.domain.com/remoteEntry.js",
        "stage": "https://app2-stage.domain.com/remoteEntry.js",
        "local": "http://localhost:3000/remoteEntry.js"
    }
}

      function getFederationRemotes() {
    const remotes = {}
    const federationRemotes = require('./federationRemotes.json')
    Object.keys(federationRemotes).forEach(remote => {
        const localUrl = (federationRemotes[remote]['local'] || federationRemotes[remote]['stage'])
        remotes[remote] = productionMode ? `${remote}@___FEDERATION_PLACEHOLDER_${remote}___` : `${remote}@${localUrl}`
    });
    return remotes;
}

а затем в плагине мы настраиваем пульты как:

      new ModuleFederationPlugin({
 remotes: getFederationRemotes()
}

Во время локальной разработки мы либо указываем удаленный на локальном, если он определен, либо по умолчанию используем нашу промежуточную среду.

Затем у нас есть несколько сценариев, которые заменяют ___FEDERATION_PLACEHOLDER_${remote}___ во время нашей сборки развертывания CI / CD.

Ваши потребности могут быть разными, поэтому вы можете немного подправить кое-что здесь. Но управление сопоставлением удаленных URL-адресов со средами во внешней конфигурации и использование функции для их чтения и замены в общем виде упрощает управление для нас.