Question

我尝试过不经常使用StackOverflow，但这让我疯狂。我有一个create-react-app，我试图将其包含在电子框架中。我发现了一个在线教程，基本上你可以从头开始创建所有东西，使用准确的webpack配置设置，它可以工作，但只有在启动电子应用程序之前首先启动webpack dev服务器。当你想打包应用程序时，这是多余的，因为package.json启动脚本只运行一个命令，即＃34;电子。＆＃34;。那么如何将我的React应用程序的静态生产文件包含在Electron中呢？我已经尝试了几次没有任何成功，而我最接近的是指向（在电子的main.js条目文件中）我的静态反应index.html文件。唯一的问题是，因为它是一个生产构建，所有东西都被缩小了。为了正确加载此文件中的资源，我必须手动删除所有第一个＆＃34; /＆＃34;来自任何src网址（你可以看到使用更大的应用程序会变得多么繁琐）。

所以我想我的实际问题是：

我如何＆＃34;服务＆＃34;我的反应应用程序的静态文件，所以电子正确加载它？

（还要注意我弹出了应用程序才能使用css模块）

PS：链接到反应电子教程 - https://medium.com/@Agro/developing-desktop-applications-with-electron-and-react-40d117d97564

Answer 1

根据教程的逻辑，您必须将静态文件放入/public文件夹中，资源将从html文档中加载相关性，但这会导致您必须手动删除的路径出现相同的问题所有第一个＆＃34; /＆＃34;来自任何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"
      }
    }]
  ]
}

将create-react-app集成到电子

1 个答案: