模块联盟，Electron 和 React

Question

是否可以使用电子模块联合？我对两者都是新手，我不确定远程应用程序的 webpack.config.js 中的以下代码是否有意义，因为我使用的是电子而不是在本地主机上运行的常规网络应用程序：

plugins: [
    new HtmlWebpackPlugin({
      template: `ejs-webpack-loader!src/renderer/index.ejs`,
    }),
    new ModuleFederationPlugin({
      name: "MICRO",
      remotes: {
        FIRST_APP: "FIRST_APP@http://localhost:1212/remoteEntry.js",
      },
    }),
  ],
],

如果我使用电子，远程应用程序会在我导入时了解 FIRST_APP（主机）在哪里吗？它似乎在不使用电子时找到了路径。

这就是 FIRST_APP 在宿主应用的 webpack.config.js 中暴露的方式：

plugins: [
    new HtmlWebpackPlugin({
        template: `ejs-webpack-loader!src/renderer/index.ejs`,
    }),
    new ModuleFederationPlugin({
      name: "FIRST_APP",
      filename: "remoteEntry.js",
      exposes: {
        "./app": "./src/renderer/App",
      },
    }),
  ],

我按照本教程的说明进行操作： https://blog.bitsrc.io/build-microfrontend-in-react-in-3-easy-steps-74790fd0c9fb

当没有按预期使用电子模块联合功能时，但是当添加电子时，它无法从远程应用程序中找到导入语句并给出错误：“找不到模块：错误：无法解析'FIRST_APP/app'”

import React, { lazy, Suspense } from "react";
const FirstApp = React.lazy(() => import("FIRST_APP/app")); //Is not finding this


const App = () => {
  const [name, setName] = React.useState(null);

  return (
    <div className="App">
      <h1>This is second app</h1>
      <h2>Micro host app is integrated here</h2>
      { name ? <p>Your name is: {name}</p> : null }
      <div>
      <Suspense fallback={<span>Loading...</span>}>
        <FirstApp />
      </Suspense>
      </div>
    </div>
  );
};

export default App;

如果有人有任何想法，请告诉我。谢谢！

Answer 1

已解决： 使用 npx create-react-app 时创建的开箱即用的反应应用程序，我很难让它工作。我认为提供了一些额外的代码，使得很难让模块联合与电子一起工作。我通过以下步骤解决了这个问题：

1. 我遵循了本教程，该教程解释了如何在 React 应用程序中设置模块联合： https://blog.bitsrc.io/build-microfrontend-in-react-in-3-easy-steps-74790fd0c9fb 这将从头开始创建一个 React 应用程序，并引导您完成如何通过仅添加您需要的库而不添加任何额外内容来实现模块联合。
2. 我升级了 React 应用程序以使用打字稿。这非常简单，可以通过遵循 React 文档来完成。
3. 我按照本教程弄清楚如何将电子添加到主机和远程应用程序并同时运行反应和电子： https://www.youtube.com/watch?v=2_fROfS8FPE&ab_channel=zayne 这让我只需要添加我需要的库就可以让电子工作，仅此而已。

我发现使用开箱即用的 React 应用程序或电子文档提供的 electron-react-boiler-plate repo 提供了很多导致问题的额外代码。