reactjs - 使用 ModuleFederationPlugin 在运行时将 publicPath 分配给单个遥控器

Question

想就模块联合向您寻求帮助。我正在尝试从外部服务器设置远程，但从 remoteEntry 加载的脚本是使用容器 url 加载的。

new ModuleFederationPlugin({
  name: 'container',
  remotes: {
    auth: `auth@${process.env.HOV_MFE_URL}/auth/latest/remoteEntry.js`,
  },
  shared: packageJson.dependencies,
}),

在网络请求中，结果是：

http://localhost:8080/[somethingscript1].js http://localhost:8080/[somethingscript2].js

Answer 1

所以这可能只会让你分道扬镳。我也在手机上写这个，很抱歉没有代码示例。

首先，您示例中的环境变量在构建时而不是运行时进行评估。所以它永远不会起作用。

我的建议是使用代理。在您的应用程序上为每个 micro-fe 设置一个特定路径，并使用为页面提供服务的任何技术（即 nginx）来代理 micro-fe。这使得它更容易，因为您可以使用环境变量之类的东西配置代理重定向。或者只是将 pod 服务与 Kubernetes 之类的系统一起使用。无论如何，您可以通过这种方式获得更多选择。

对于开发测试，webpack 开发服务器也支持非常健壮的代理。