javascript - Electron react 构建未启动

Question

我在尝试将这两件事粘合在一起时遇到了一些问题。

让我给你一些背景信息:我正在尝试基于我在 react 中开发的 web 应用程序构建一个桌面应用程序，它完全可以运行，并且 react 的构建过程没有任何错误或问题。当我尝试粘合 Electron + React Built Project 时，问题就来了。

我有以下结构:

/dist

/节点模块

/react-mobx-路由器

/ build

/静止的

/js

main.05ef4655.js

/css

main.9d8efafe.css

index.html

index.js

在 index.js 我有以下代码，基本上是来自 Electron 演示应用程序的示例样板代码:

'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 启动 Electron 应用程序时(更改我之前告诉你的路径)它启动时没有任何错误或问题，但只有一个空白屏幕，如果我去文件并查找它们，它们是正确的并且代码在里面，捆绑并且所有反应 -创建应用程序的东西。

这是 package.json 的默认配置Electron附带的，我没有修改:

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

这也是 package.json我的 react 项目:

{
  "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 应用程序是完全可用的。

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

温暖的问候，
亚历克斯。

Answer 1

我不是 React 英雄(很长一段时间)，但我能够使用此样板中列出的模式运行、热重载和发布构建:electron-es6-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')
  });
}

包.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"
  }
}