我正在使用电子生成器生成一个.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));
文件结构: