Question

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

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

我有以下结构：

/ dist
/ node_modules
/ react-mobx-router
- / build
  - / static
    - / 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 built.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的默认配置，我没有修改过：

{
  "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 App将完全正常运行。

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

热烈的问候，亚历克斯。

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')
  });
}

的package.json

＆＃13;

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

＆＃13;

电子反应构建不发射

1 个答案: