typescript Module Federation,Electron & React

2izufjch  于 2023-05-19  发布在  TypeScript
关注(0)|答案(1)|浏览(138)

是否可以在electron中使用模块联合?我对这两个都是新手,我不确定远程应用程序的webpack.config.js中的以下代码是否有意义,因为我使用的是electron,而不是在localhost上运行的常规Web应用程序:

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;

请让我知道如果有人有任何想法。谢谢!

11dmarpk

11dmarpk1#

我想出了如何在使用电子的react应用程序中实现模块联合。首先,我遵循了这个教程,它解释了如何在react应用程序中设置模块联合:https://blog.bitsrc.io/build-microfrontend-in-react-in-3-easy-steps-74790fd0c9fb
然后,我按照本教程来弄清楚如何将electron添加到主机和远程应用程序中,并同时运行react和electron:https://www.youtube.com/watch?v=2_fROfS8FPE&ab_channel=zayne

相关问题