电子反应生成不发射

Question

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

让我给你一些上下文：我正在尝试构建一个基于我在react中开发的web应用程序的桌面应用程序，它完全可以运行，react的构建过程没有任何错误或问题。问题来了，当我试图胶合电子+一个反应建成的项目。

我的结构如下：

• /dist
• /node_module
• /react-mobx-router
  • /生成
    • /静态
      • /js
        • main.05ef4655.js
        • main.9d8eFafe.css

        在index.js中，我有以下代码，这基本上是Electronic 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 
        

        关键是，当我用yarn start启动电子应用程序（改变了我之前告诉过你的路径）时，它启动时没有任何错误或问题，只是一个空白屏幕，如果我去找文件，它们是正确的，代码在里面，捆绑在一起，所有的react-create-app的东西做的。

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

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

        所以我请求你们的智慧，伙计们。我需要点光这样我就可以继续这个项目了。希望你能在这个问题上帮助我，我已经提供了足够的信息给你。如果你需要更多的信息，尽管告诉我。

        热烈的问候，亚历克斯。

Answer 1

我不是React英雄（很长一段时间），但我能够运行，热重新加载和释放构建使用这个样板的模式:Electrone-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

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