电子反应建造不发射

Question

我在试图把这两件事粘合在一起的时候遇到了一些问题。

让我给你一些背景:我试图构建一个桌面应用程序的基础上，我已经开发了一个web应用程序，它是完全可行的，构建过程的反应是没有任何错误或问题。当我试图粘合电子+一个反应构建项目时，问题就来了。

我的结构如下：

• /区
• / node_modules
• /react mobx-路由器
  • /构建
    • /静态
      • / js
        • main.05ef4655.js

​

        - / css  
            - main.9d8efafe.css

​

​

    - index.html

​

​

• index.js

在index.js上，我有以下代码，基本上是电子演示应用程序中的样板代码：

'use strict';
const electron = require('electron');

const app = electron.app;

// adds debug features like hotkeys for triggering dev tools and reload
require('electron-debug')();

// prevent window being garbage collected
let mainWindow;

function onClosed() {
    // dereference the window
    // for multiple windows store them in an array
    mainWindow = null;
}

function createMainWindow() {
    const win = new electron.BrowserWindow({
        width: 1280,
        height: 720,
        minWidth: 1280,
    minHeight: 720
    });

    win.loadURL(`file://${__dirname}/react-mobx-router/build/index.html`);
    //win.loadURL(`http://localhost:3000`);
    win.on('closed', onClosed);

    return win;
}

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

app.on('activate', () => {
    if (!mainWindow) {
        mainWindow = createMainWindow();
    }
});

app.on('ready', () => {
    mainWindow = createMainWindow();
});

我还必须在react构建的index.html中手动更改一些路径，这样看起来如下：

<link href="./static/css/main.9d8efafe.css" rel="stylesheet">

而不是：

<link href="/static/css/main.9d8efafe.css" rel="stylesheet">

第二个得到的错误如下：

file:///D:/static/css/main.9d8efafe.css Failed to load resource: net::ERR_FILE_NOT_FOUND

main.05ef4655.js Failed to load resource: net::ERR_FILE_NOT_FOUND 

关键是，当我用yarn start (改变我之前告诉过你的路径)启动电子应用程序时，它的启动没有任何错误，也没有发出任何问题，但只有一个空白的屏幕，如果我找到文件并查找它们，它们是正确的，代码在里面，捆绑和所有的反应-创建-应用程序的东西。

这是电子附带的package.json的默认配置，我还没有修改：

{
  "name": "app",
  "productName": "App",
  "version": "0.0.0",
  "description": "",
  "license": "MIT",
  "repository": "user/repo",
  "author": {
    "name": "",
    "email": "",
    "url": ""
  },
  "scripts": {
    "test": "xo",
    "start": "electron .",
    "build": "electron-packager . --out=dist --asar --overwrite --all"
  },
  "files": [
    "index.js",
    "index.html",
    "index.css"
  ],
  "keywords": [
    "electron-app",
    "electron"
  ],
  "dependencies": {
    "electron-debug": "^1.0.0"
  },
  "devDependencies": {
    "devtron": "^1.1.0",
    "electron-packager": "^8.0.0",
    "electron": "^1.0.1",
    "xo": "^0.16.0"
  },
  "xo": {
    "esnext": true,
    "envs": [
      "node",
      "browser"
    ]
  }
}

这也是my React项目的package.json：

{
  "name": "react-mobx",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "custom-react-scripts": "0.0.23",
    "mobx-react-devtools": "^4.2.11"
  },
  "dependencies": {
    "mobx": "^3.1.4",
    "mobx-react": "^4.1.2",
    "mobx-react-router": "latest",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-router": "latest"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

请注意，如果我不使用电子，那么React是完全功能的。

所以我才要你们的智慧，伙计们。我需要一点光线，这样我才能继续推进这个项目。希望你能帮我解决这个问题，我已经向你提供了足够的信息。如果你需要更多的信息，就告诉我。

热烈的问候，亚历克斯。

Answer 1

我不是一个反应英雄(长时间的粉笔)，但我能够运行，热重新加载和发布的模式，由这个样板：电子-ES6反应。我为构建添加了一些条件代码到main.js (下面)。毫无疑问，有更好的解决办法。

你肯定需要把你的反应package.json和电子的合并。

var isDev = process.env.APP_DEV ? (process.env.APP_DEV.trim() == "true") : false;

if (isDev) {
  // only add this during development
  require('electron-reload')(__dirname, {
    electron: path.join(__dirname, 'node_modules', '.bin', 'electron')
  });
}

package.json

{
  "name": "electron-es6-react",
  "version": "0.1.0",
  "description": "template",
  "license": "MIT",
  "production": false,
  "version-string": {
    "CompanyName": "Cool Co.",
    "FileDescription": "template",
    "OriginalFilename": "template",
    "ProductName": "template",
    "InternalName": "template"
  },
  "main": "main.js",
  "scripts": {
    "start": "APP_DEV=true electron -r babel-register .",
    "package-mac": "electron-packager . --overwrite --tmpdir=false --platform=darwin --arch=x64  --prune=true --out=release-builds",
    "package-win": "electron-packager . --overwrite --tmpdir=false --asar=true --platform=win32 --arch=ia32 --prune=true --out=release-builds"
  },
  "dependencies": {
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-register": "^6.3.13",
    "fs-jetpack": "^0.12.0",
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "react-images": "^0.5.2"
  },
  "devDependencies": {
    "electron": "^1.4.3",
    "electron-packager": "^8.5.2",
    "electron-reload": "^1.1.0"
  }
}

​