Electron 与 React：如何设置生产网络服务器答案

【问题标题】：Electron with React: how to setup production webserverElectron 与 React：如何设置生产网络服务器
【发布时间】：2017-12-03 21:30:05
【问题描述】：

我有一个电子应用程序，它加载在端口 8080 上的 webpack-dev-server 上运行的 React 应用程序。React 应用程序正在与端口 9001 上的节点服务器应用程序通信。如何在生产中设置 webserver？我现在尝试的是通过 postinstall 脚本单独安装节点。所以 electron 使用自己打包的 node 版本，而 webpack-dev-server 使用另一个版本的 node，通过脚本安装。我觉得这不是正确的方法。如何将电子版本的节点用于 webpack-dev-server？是否可以使其仅将 node 的打包版本用于电子和 webpack-dev-server？谢谢

【问题讨论】：

标签： node.js reactjs electron webpack-dev-server

【解决方案1】：

由于 windows 上的安装后问题，通过 deb 依赖安装 node 的想法并不好 - 在 windows 上编写依赖安装并不容易。相反，我下载了节点二进制文件并将节点二进制文件打包到 asar 包中。我使用 files 选项仅打包运行平台构建的二进制文件：

package.json:

"build": {
    "asarUnpack": [
      "**/*"
    ],
    "files": [
      "!binaries",
      "binaries/${os}/${arch}/node",
      "src",
      "*.html",
      "*.js",
      "*.tpl",
      "*.sh",
      "*.json",
      "*.md",
      "*.lock"
    ],

感谢 asarUnpack 选项，我解压了 asar 包，并且能够访问文件系统上的节点二进制文件。然后在主进程 index.js 中我以这种方式构建节点路径：

const nodePath = path.join(
    process.resourcesPath,
    "app.asar.unpacked",
    'binaries',
    platform == "win32" ? "win" : platform,
    arch,
    "node"
)

const productionWebpackServerStartPathArgs = [`${process.resourcesPath}/app.asar.unpacked/node_modules/webpack-dev-server/bin/webpack-dev-server.js`, '--config', `${process.resourcesPath}/app.asar.unpacked/webpack.config.js`];
let webpack_dev_server_cmd = crossSpawn(nodePath, productionWebpackServerStartPathArgs );

【讨论】：