如何用electron-builder建立CLI工具的电子图形用户界面

Question

我已经做了一个电子应用程序，这是一个图形用户界面的第三方CLI工具，幸运的是，它工作在开发模式下，当我运行electron .

在主进程中，我的应用程序使用node的child_process.spawn()运行脚本s3-download-client/bin/s3-download-client，它工作得很好，因为我知道CLI工具的路径。它在src/main/index.js中定义为：

const DOWNLOAD_CLIENT = path.resolve(__dirname, '..', '..', 's3-download-client/bin/s3-download-client');

但是，我不知道如何将electron-builder配置为在我构建应用程序中包含外部工具，并使其协同工作。

下面是我的项目结构：

.
├── package.json
├── s3-download-client
│   ├── bin
│   │   └── s3-download-client
└── src
│   ├── main
│   │   ├── index.js
│   │   └── someLib.js
│   └── renderer
│       ├── app.js
│       ├── controllers
│       ├── index.html
│       └── templates

我的package.json

{
  "name": "logs-explorer",
  "version": "1.0.0",
  "description": "",
  "main": "src/main/index.js",
  "scripts": {
    "pack": "electron-builder --dir",
    "dist": "electron-builder",
    "postinstall": "electron-builder install-app-deps"
  },
  "build": {
    "appId": "your.id",
    "mac": {
      "category": "your.app.category.type"
    }
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "angular": "^1.6.8",
    "angular-eonasdan-datetimepicker": "^0.3.9",
    "angular-route": "^1.6.8",
    "bootstrap": "^3.3.7",
    "eonasdan-bootstrap-datetimepicker": "^4.17.47",
    "jquery": "^3.3.0",
    "moment": "^2.20.1",
    "open": "0.0.5",
    "opn": "^5.2.0",
    "tempy": "^0.2.1"
  },
  "devDependencies": {
    "electron": "^1.7.10",
    "electron-builder": "^19.54.0"
  }
}

我想我可能不得不在我的代码中以另一种方式定义CLI工具的路径，并在package.json中添加一些额外的electron-builder's配置，但我找不到它应该是什么样子。

Answer 1

好吧，解决方法很简单。我必须定义带有路径的files属性，这些路径指向我想要包含在构建的应用程序中的资源。我不需要在我的应用代码中更改任何路径。不幸的是，我不得不使用asar: false标志，因为使用默认的true值，我的应用程序不能工作。也许可以用asarUnpack属性来修复它，但是我没有成功。

下面是我的package.json中的electron-builder配置

  "build": {
    "appId": "your.id",
    "mac": {
      "category": "your.app.category.type"
    },
    "files": [
      "s3-download-client/**/*",
      "src/**/*"
    ],
    "asar": false
  }

在files中包含node_modules不是必需的，但当然您必须指定所有其他目录。