如何编写 Electron React 应用入门工具包？答案

【问题标题】：How to writie Electron react app starter kit?如何编写 Electron React 应用入门工具包？
【发布时间】：2019-01-11 01:24:52
【问题描述】：

我正在尝试使用 react 和 electronjs 开始我的新项目。我已经安装了带有 babel 和 web pack 的 react-app，它工作正常，但现在我正在努力用电子启动它，但没有任何运气：/。我看了很多关于 react 和 electron 的文章，但没有任何建议和真实示例如何将（react、webpack、babel 和 electron）连接在一起。

electron-starter.js 看起来像这样：

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

const path = require('path');
const url = require('url');
const isDev = require('electron-is-dev');

let mainWindow;

function createWindow() {
    mainWindow = new BrowserWindow({width: 900, height: 680});
    mainWindow.loadURL(isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '../build/index.html')}`);
    mainWindow.on('closed', () => mainWindow = null);
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

app.on('activate', () => {
    if (mainWindow === null) {
        createWindow();
    }
});

和 package.json：

{
  "name": "hostelpro-app-2",
  "version": "0.1.0",
  "private": true,
  "homepage": "./",
  "main": "./electron-starter.js",
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "webpack-dev-server --open --mode development",
    "build": "webpack --mode production",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "electron": "electron .",
    "electron-dev": "concurrently \"BROWSER=none npm start\" \"wait-on http://localhost:3000 && electron .\""
  },
  "babel": {
    "presets": [
      "env"
    ]
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^1.0.0",
    "electron": "^2.0.6",
    "foreman": "^3.0.1",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.9.2",
    "prop-types": "^15.6.2",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.21.0",
    "webpack": "^4.16.3",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  }
}

现在错误消息是：“'concurrently' 不被识别为内部或外部命令”，但如果我从 package.json 中删除 'concurrently' 单词，那么它“'BROWSER' 不被识别为内部或外部命令”出现外部命令”错误。

任何建议都会有所帮助。谢谢！ :)

【问题讨论】：

“但没有任何运气”有点含糊。你有错误吗？如果是这样，它说明了什么？如果没有，会发生什么？什么都没有？根本没有迹象表明出了什么问题？不是electron 用户，但是您可以查看任何日志吗？
抱歉没有添加错误信息，我会改正的。
好吧，“X 未被识别为内部或外部命令”意味着 X 是一个正在使用的可执行文件，假设它位于当前目录或包含在 %PATH% 环境中的目录中变量，但实际上在任何一个地方都找不到。谷歌搜索确切的错误消息会将您带到this answer，这对您没有帮助吗？
@s.m.你是对的，我已经安装了“并发”并且这个错误消失了，但是现在我有“浏览器”并且“等待”是无法识别的错误。我会自己用谷歌搜索，希望能找到有价值的东西，谢谢:)

标签： reactjs webpack electron