0

查看 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",
}
4

1 回答 1

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 到环境的映射并使用函数来读取它们并以通用方式替换它们，使我们更容易管理。

于 2021-02-21T01:54:04.043 回答