node.js - 如何在 Electron 应用程序中本地启动 Node 服务器

Question

我正在运行一个 NG4-Electron 应用程序，现在我想在 Electron 应用程序启动时启动一个本地 Node js 服务器 (Express)。我在应用程序的根目录下有一个名为 local_server 的本地文件夹，其中包含 node server.js。下面是我的 package.json。我比较新，无法理解如何启动服务器。

{
  "name": "demo_app",
  "version": "0.0.1",
  "description": "",
  "author": {
    "name": "Subbu"
  },
  "keywords": [
    "angular",
    "electron",
    "typescript",
    "sass"
  ],
  "main": "main.js",
  "private": true,
  "scripts": {
    "ng": "ng",
    "lint": "ng lint",
    "start": "npm-run-all --parallel webpack:watch electron:serve",
    "webpack:watch": "webpack --watch",
    "start:web": "webpack-dev-server --content-base . --port 4200 --inline",
    "build:electron:main": "tsc main.ts --outDir dist && copyfiles package.json dist && cd dist && npm install --prod && cd .. && copyfiles local_server ./dist",
    "build": "webpack --display-error-details && npm run build:electron:main",
    "build:prod": "cross-env NODE_ENV=production npm run build",
    "electron:serve": "npm run build:electron:main && electron ./dist --serve",
    "electron:test": "electron ./dist",
    "electron:dev": "npm run build && electron ./dist",
    "electron:prod": "npm run build:prod && electron ./dist",
    "electron:linux": "npm run build:prod && node package.js --asar --platform=linux --arch=x64",
    "electron:windows": "npm run build:prod && node package.js --asar --platform=win32 --arch=ia32",
    "electron:mac": "npm run build:prod && node package.js --asar --platform=darwin --arch=x64",
    "test": "karma start ./karma.conf.js",
    "pree2e": "webdriver-manager update --standalone false --gecko false --quiet && npm run build",
    "e2e": "protractor ./protractor.conf.js"
  },
  "dependencies": {
    "@angular/animations": "^4.4.6",
    "@angular/common": "4.4.6",
    "@angular/compiler": "4.4.6",
    "@angular/core": "4.4.6",
    "@angular/forms": "4.4.6",
    "@angular/http": "4.4.6",
    "@angular/platform-browser": "4.4.6",
    "@angular/platform-browser-dynamic": "4.4.6",
    "@angular/router": "4.4.6",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
    "core-js": "2.4.1",
    "enhanced-resolve": "3.3.0",
    "rxjs": "5.4.3",
    "zone.js": "0.8.17"
  },
  "devDependencies": {
    "@angular/cli": "1.4.3",
    "@angular/compiler-cli": "4.4.6",
    "@types/core-js": "0.9.36",
    "@types/jasmine": "2.5.54",
    "@types/node": "7.0.7",
    "autoprefixer": "7.1.4",
    "codelyzer": "3.2.0",
    "copyfiles": "1.2.0",
    "cross-env": "5.0.5",
    "css-loader": "0.28.7",
    "cssnano": "3.10.0",
    "electron": "1.7.6",
    "electron-packager": "9.1.0",
    "electron-reload": "1.2.1",
    "exports-loader": "0.6.4",
    "file-loader": "0.11.2",
    "html-loader": "0.5.1",
    "istanbul-instrumenter-loader": "3.0.0",
    "jasmine-core": "2.8.0",
    "jasmine-spec-reporter": "4.2.1",
    "json-loader": "0.5.7",
    "karma": "1.7.1",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "1.3.0",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "karma-sourcemap-loader": "0.3.7",
    "less-loader": "4.0.5",
    "minimist": "1.2.0",
    "mkdirp": "0.5.1",
    "npm-run-all": "^4.1.1",
    "postcss-loader": "2.0.6",
    "postcss-url": "7.1.2",
    "protractor": "5.1.2",
    "raw-loader": "0.5.1",
    "sass-loader": "6.0.6",
    "script-loader": "0.7.1",
    "source-map-loader": "0.2.1",
    "style-loader": "0.18.2",
    "stylus-loader": "3.0.1",
    "ts-node": "3.3.0",
    "tslint": "5.7.0",
    "typescript": "2.5.2",
    "url-loader": "0.5.9",
    "webdriver-manager": "12.0.6",
    "webpack": "3.6.0",
    "webpack-dev-server": "2.8.2"
  }
}

这是我的 main.ts 文件。不确定如何根据评论实现更改:

import { app, BrowserWindow, screen } from 'electron';
import * as path from 'path';

let win, serve;
const args = process.argv.slice(1);
serve = args.some(val => val === '--serve');

if (serve) {
  require('electron-reload')(__dirname, {
  });
}

function createWindow() {

  const electronScreen = screen;
  const size = electronScreen.getPrimaryDisplay().workAreaSize;
  win = new BrowserWindow({
    x: 0,
    y: 0,
    width: size.width,
    height: size.height
  });

  win.loadURL('file://' + __dirname + '/index.html');

  if (serve) {
    win.webContents.openDevTools();
  }

  win.on('closed', () => {
    win = null;
  });
}

try {
  app.on('ready', createWindow);

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

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

} catch (e) {
}

Answer 1

您需要在 BrowserWindow 创建器中添加预加载选项，并添加将运行“npm”命令的文件。

主要.js

const isDev = require('electron-is-dev')

function createWindow() {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true,
      preload: path.join(__dirname, "preload.js") // add "preload"
    }
  })

  win.loadURL(
    isDev
      ? 'http://localhost:3000'
      : `file://${path.join(__dirname, '../build/index.html')}`
  )
}

在这里你可以把你使用的脚本放在你的 package.json 中

预加载.js

const { exec } = require("child_process");

// All of the Node.js APIs are available in the preload process.
window.addEventListener("DOMContentLoaded", () => {
  exec(`npm run cors-server`);
});

在这种情况下，我只是添加了一个脚本来运行我的快速服务器，这将防止“cors”问题，但显然您将运行您需要的脚本

包.json

"scripts": {
    "cors-server": "node server/cors-server.js",
    "electron:serve": "concurrently -k \"cross-env BROWSER=none npm run start\" \"npm run electron:start\"",
    "electron:build": "npm run build && electron-builder -c.extraMetadata.main=build/main.js",
    "electron:start": "wait-on tcp:3000 && electron ."
  },