2

webpack.config.js 为 Module Federation 拉取远程 js。

plugins: [
  new ModuleFederationPlugin({
    remotes: {
      'mfe1': "mfe1@http://xxxxxxxxxx.com/remoteEntry.js"
    }
  })
],

我如何在遥控器中或在遥控器之外使用本地 JS 文件？我在另一个文件夹中有一个简单的 react.js 库，其中包含./dist/browser/remote-entry.js文件。我无法发布到 npm，所以我试图从本地加载它。会不会是这样的：

plugins: [
  new ModuleFederationPlugin({
    remotes: {
      'mfe1': "../../myproject/dist/browser/remoteEntry.js"
    }
  })
],
4

1 回答 1

3

该remotes条目应该url是在运行时而不是构建时可访问的。如果仅在构建时需要，它会自动暗示remoteEntry捆绑，这违背了 Webpack 模块联合（WMF简称）的目的。

你说：

webpack.config.js 为 Module Federation 拉取远程 js。

但我不确定这应该是什么意思。Webpack 根本不会“拉取”远程文件。它告诉最终构建在哪里查看，以便当您的代码（即bundle.js）实际执行时，它知道从哪里动态加载模块。这意味着，为了WMF工作，您仍然需要从您的 Web 服务器提供文件。

你主要有两个选择：

  1. 如果您不想动态加载模块，只需在没有WMF.
  2. 如果你确实想要动态加载，那么你需要告诉 webpack 那个remotesurl。理想情况下，您可以从中获取实际的服务器地址process.env，您可以通过dotenv（或通过许多其他方式）提供该地址：

webpack.config.js

// ...
module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      remotes: {
        'mfe1': `mfe1@${process.env.REMOTE_HOST || 'http://localhost:8080'}/remoteEntry.js`
      }
    })
  ],
  // ...
};

.env

REMOTE_HOST=http://xxxxxxxxxx.com

此外，您可能需要考虑这篇关于如何部署WMF构建的文章。

于 2021-06-11T14:54:55.580 回答