如何在electron-builder生成的安装程序中加载react app?

时间:2019-04-11 15:30:58

标签: javascript reactjs electron-builder

我正在使用电子生成器生成一个.exe安装程序文件,以尝试查看ReactJS应用程序。这不是一个create react app生成的React网站,我只是使用ParcelJS捆绑并生成一个构建。问题是,当我安装电子应用程序时,我得到了一个黑屏,例如尚未与React应用程序捆绑在一起。有什么想法吗?

我在dist/web中建立反应区,在dist/electron中建立电子应用程序。

package.json:

{
  "name": "<hidden>",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "parcel ./src/index.html --port 8080",
    "build": "parcel build ./src/index.html -d dist/web",
    "electron-dev": "concurrently \"npm start\" \"wait-on http://localhost:8080 && electron .\"",
    "electron-pack": "build -c.extraMetadata.main=electron.js",
    "preelectron-pack": "npm run build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "main": "electron.js",
  "devDependencies": {
    "@types/jest": "^24.0.11",
    "@types/react": "^16.8.8",
    "@types/react-dom": "^16.8.3",
    "@types/react-helmet": "^5.0.8",
    "@types/react-redux": "^7.0.5",
    "@types/react-router-dom": "^4.3.1",
    "@types/redux-mock-store": "^1.0.0",
    "@types/styled-components": "^4.1.12",
    "concurrently": "^4.1.0",
    "electron": "^4.1.4",
    "electron-builder": "^20.39.0",
    "electron-is-dev": "^1.1.0",
    "jest": "24.0.0",
    "jest-serializer-enzyme": "^1.0.0",
    "jest-styled-components": "^6.3.1",
    "parcel-bundler": "^1.12.3",
    "react-test-renderer": "^16.8.4",
    "react-testing-library": "^6.0.0",
    "redux-mock-store": "^1.5.3",
    "ts-jest": "^24.0.1",
    "tslint": "^5.13.1",
    "tslint-config-airbnb": "^5.11.1",
    "typescript": "^3.4.2",
    "wait-on": "^3.2.0"
  },
  "dependencies": {
    "react": "^16.8.5",
    "react-dom": "^16.8.5",
    "react-helmet": "^5.2.0",
    "react-redux": "^6.0.1",
    "react-router-dom": "^5.0.0",
    "styled-components": "^4.2.0"
  },
  "homepage": "./",
  "build": {
    "appId": "com.electron.virtual-agent",
    "files": [
      "public/**/*",
      "dist/web/**/*",
      "node_modules"
    ],
    "directories": {
      "buildResources": "dist/web",
      "output": "dist/electron"
    }
  }
}

electron.js:

const { app, BrowserWindow } = require('electron');
const path = require('path');

const buildUrl = `file://${path.join(__dirname, '../../dist/index.html')}`;

const createWindow = () => {
  const windowOptions = {
    width: 1200,
    height: 700,
    show: false,
    center: true,
    backgroundColor: '#FFFFFF',
    webPreferences: {
      webSecurity: false
    }
  };

  let win = new BrowserWindow(windowOptions);

  win.loadURL(buildUrl);
  win.setMenu(null);

  win.webContents.openDevTools();

  win.once('ready-to-show', win.show);
};

app.on('ready', createWindow);

app.on('activate', () => (!win ? createWindow() : null));

文件结构:

https://i.imgur.com/Eemjt8v.png

0 个答案:

没有答案