将create-react-app集成到电子中

Posted 2021-04-26

我尝试过不经常使用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"
      }
    }]
  ]
}