Question

我正在尝试使用react和electrojs启动我的新项目。我已经安装了带有babel和web pack的react-app，它可以正常工作，但是现在我正努力用电子启动它，但是没有任何运气：/。我看了很多关于反应和电子的文章，但是没有建议和真实的例子说明如何将（反应，Web Pack，Babel和电子）连接在一起。

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'不被识别为内部或外部命令”外部命令”错误。

任何建议都会有所帮助。谢谢！：）

Answer 1

I found great guideline for my question, if someone is looking for answer, check out this link - there is everything explained very well, thanks "Alex Devero"

如何编写Electron React应用入门套件？

1 个答案: