Javascript 电子不发射

我在把这两件事粘在一起时遇到了一些问题

让我给你一些背景：我正在尝试基于我在react中开发的web应用程序构建一个桌面应用程序，它是完全可操作的，react的构建过程没有任何错误和问题。当我试图将Electron+与React构建的项目粘合在一起时，问题就出现了

我的结构如下：

• /距离
• /节点单元
• /反应mobx路由器
  • /建造
    • /静止的
      • /js
        • main.05ef4655.js
      • /css
        • main.9d8efafe.css
    • index.html
• index.js

在index.js中，我有以下代码，基本上是来自electron demo应用程序的样例样板代码：

'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 Build index.html上的一些路径，使其看起来像：

而不是：

第二个出现以下错误：

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 

关键是，当我用

纱线开始

启动Electron应用程序（更改我之前告诉过你的路径）时，它启动时没有任何错误，也没有问题，但只有一个空白屏幕。如果我去文件并查找它们，它们是正确的，代码在里面，捆绑在一起，所有这些都是create app stuff所做的

这是Electron附带的

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"
    ]
  }
}

这也是我的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"
  }
}

请注意，如果我不使用Electron，React应用程序是完全可用的

这就是为什么我需要你的智慧，伙计们。我需要一些光线，这样我才能继续这个项目。希望你能在这个问题上帮助我，我已经为你提供了足够的信息。如果你需要更多信息，请告诉我

亲切问候,， Alex.

我不是React英雄（用很长的粉笔），但我能够使用此样板文件中设置的模式运行、热加载和发布构建：。我为构建向

main.js

（以下）添加了一些条件代码。毫无疑问，有更好的解决办法

您肯定需要将React package.json与Electron合并

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

{
“名称”：“electron-es6-react”，
“版本”：“0.1.0”，
“说明”：“模板”，
“许可证”：“麻省理工学院”，
"生产":假,，
“版本字符串”：{
“公司名称”：“酷公司”，
“文件描述”：“模板”，
“OriginalFilename”：“模板”，
“产品名称”：“模板”，
“内部名称”：“模板”
},
“main”：“main.js”，
“脚本”：{
“开始”：“APP_DEV=true electron-r巴别塔寄存器。”，
“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”
},
“依赖项”：{
“babel-preset-es2015”：“^6.3.13”，
“巴别塔预设反应”：“^6.3.13”，
“巴别塔寄存器”：“^6.3.13”，
“fs jetpack”：“^0.12.0”，
“反应”：“^15.3.2”，
“反应dom”：“^15.3.2”，
“反应图像”：“^0.5.2”
},
“依赖性”：{
“电子”：“^1.4.3”，
“电子包装商”：“^8.5.2”，
“电子重新加载”：“^1.1.0”
}
}

我不是React hero（很明显），但我能够使用此样板文件中设置的模式运行、热加载和发布构建：。我为构建向

main.js

（以下）添加了一些条件代码。毫无疑问，有更好的解决办法

您肯定需要将React package.json与Electron合并

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

{
“名称”：“electron-es6-react”，
“版本”：“0.1.0”，
“说明”：“模板”，
“许可证”：“麻省理工学院”，
"生产":假,，
“版本字符串”：{
“公司名称”：“酷公司”，
“文件描述”：“模板”，
“OriginalFilename”：“模板”，
“产品名称”：“模板”，
“内部名称”：“模板”
},
“main”：“main.js”，
“脚本”：{
“开始”：“APP_DEV=true electron-r巴别塔寄存器。”，
“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”
},
“依赖项”：{
“babel-preset-es2015”：“^6.3.13”，
“巴别塔预设反应”：“^6.3.13”，
“巴别塔寄存器”：“^6.3.13”，
“fs jetpack”：“^0.12.0”，
“反应”：“^15.3.2”，
“反应dom”：“^15.3.2”，
“反应图像”：“^0.5.2”
},
“依赖性”：{
“电子”：“^1.4.3”，
“电子包装商”：“^8.5.2”，
“电子重新加载”：“^1.1.0”
}
}

Ahm。。。这对我不起作用。。。我认为这是因为在启动Electron应用程序之前，我需要设置一个express server来为React应用程序服务，然后再启动ser window。例如，如果要显示React应用程序，我不能在浏览器中“打开”React应用程序。@AlexCasillas–我选择了一个更简单的设置，以在学习React时降低复杂性。还有其他一些设置可以完成整个服务器/本地主机的工作。您仍然需要合并那些package.json文件。。。这对我不起作用。。。我认为这是因为在启动Electron应用程序之前，我需要设置一个express server来为React应用程序服务，然后再启动ser window。例如，如果要显示React应用程序，我不能在浏览器中“打开”React应用程序。@AlexCasillas–我选择了一个更简单的设置，以在学习React时降低复杂性。还有其他一些设置可以完成整个服务器/本地主机的工作。您仍然需要合并那些package.json文件。