是否可以在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;
请让我知道如果有人有任何想法。谢谢!
1条答案
按热度按时间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