我尝试过不经常使用StackOverflow,但这让我疯狂。我有一个create-react-app,我试图将其包含在电子框架中。我发现了一个在线教程,基本上你可以从头开始创建所有东西,使用准确的webpack配置设置,它可以工作,但只有在启动电子应用程序之前首先启动webpack dev服务器。当您想打包应用程序时,这是多余的,因为package.json启动脚本只运行一个命令,即“电子”。那么如何将我的React应用程序的静态生产文件包含在Electron中呢?我已经尝试了几次没有任何成功,而我最接近的是指向(在电子的main.js条目文件中)我的静态反应index.html文件。唯一的问题是,因为它是一个生产构建,所有东西都被缩小了。为了正确加载此文件中的资源,我不得不从任何src url手动删除所有第一个“/”(您可以看到使用较大的应用程序会变得非常繁琐)。
所以我想我的实际问题是:
如何“提供”我的反应应用程序的静态文件,以便电子正确加载它?
(还要注意我为了使用css模块而弹出了应用程序)
PS:链接到反应电子教程 - https://medium.com/@Agro/developing-desktop-applications-with-electron-and-react-40d117d97564
根据教程的逻辑,您必须将静态文件放入/public
文件夹中,资源将从html文档中加载相关性,但是这将导致与您必须手动删除所有第一个“/”的路径相同的问题任何src网址。构建时URL必须正确。
话虽如此,我认为该教程鼓励电子开发的不良做法,我认为这是你所拥有的问题的一部分。
你永远不会从node_modules路径启动电子。您可以通过electron ./path/to/electronscriptsfolder
执行此操作,这将在包含应用程序定义的此文件夹中加载index.js / main.js。
Webpack是电子的错误方法,因为你不需要捆绑,当打包电子时,webpack往往会产生本机包和路径的问题(正如你自己描述的那样)。您可以使用electron-compile
或gulp
管道来完成您的电子特定逻辑。
即使它们对电子非常重要,也没有给出巴贝尔配置。基本上你需要两个bable配置,一个用于在特定节点版本上运行电子,另一个用于在特定实现上运行的chrome。
这是一个使用Chrome 59和Node.js 8.2.1的电子1.8.1的例子
Renderprocess
{
"presets": [
["env", {
"targets": {
"chrome": "59"
}
}]
]
}
Mainprocess
{
"presets": [
["env", {
"targets": {
"node": "8.2.1"
}
}]
]
}