如何使用电子构建器将文件夹和文件添加到电子构建中

Question

我正在创建一个电子,它运行从create-react-app生成的反应.然后我添加nedbjs(持久性数据库)和camojs(nedb的ODM)作为依赖.连接与nedb反应我使用电子ipc.

这是我的项目结构:

这是我的package.json:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "electron-dev": "concurrently \"cross-env BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electron .\"",
    "electron-pack": "build --em.main=build/electron.js",
    "electron-release": "build --em.main=build/electron.js --publish=always",
    "preelectron-pack": "yarn build",
    "preelectron-release": "yarn build"
  },
  "build": {
    "appId": "com.example.cra-electron-boilerplate",
    "files": [
      "build/**/*",
      "node_modules/**/*",
      "package.json"
    ],
    "directories": {
      "buildResources": "assets"
    },
    "publish": {
      "provider": "github"
    }
  },

我使用命令纱电子包来打包我的应用程序.然后从dist文件夹运行解压缩的可执行文件然后出现此错误:

这是我的回购

Answer 1

要在电子版本文件夹中添加文件或文件夹,可以在package.json上添加extraFiles选项.以下是复制"凭证"目录的示例:

"build": {
  "appId": "com.example.electron-boilerplate",
  "files": [
    "app/**/*",
    "node_modules/**/*",
    "package.json"
  ],
  "directories": {
    "buildResources": "resources"
  },
  "extraFiles": [
    "credentials"
  ],
  "publish": null
},

然后

$ npm run release // as usual

希望它会有所帮助

Answer 2

我正在使用 vue + 电子库（https://github.com/nklayman/vue-cli-plugin-electron-builder）。我正在使用以下内容：

• 电子 5.0.13
• 2.6.10 版
• vue-cli-plugin-electron-builder 1.4.0

使用该特定配置，以下vue.config.js文件能够让我将项目中的几个目录复制并粘贴到电子版本中：

vue.config.js（适用于我的设置）

module.exports = {
    pluginOptions: {
      electronBuilder: {
        builderOptions: {
          // options placed here will be merged with default configuration and passed to electron-builder
          files: [
            "**/*"
          ],
          extraFiles: [
            {
              "from": "eepromStaging",
              "to": "eepromStaging",
              "filter": ["**/*"]
            },
            {
                "from": "src/assets/bin",
                "to": "src/assets/bin",
                "filter": ["**/*"]
            }
          ]
        }
      }
    }
  }

所以我认为这就是正在发生的事情：

**/*是一个 glob 模式，意思是“匹配所有文件”。在files: [**/*]中vue.config.js会让你的整个项目目录提供给制造商。但是，这并不意味着这些文件将在您的构建目录中：它只是意味着构建时构建器可以使用这些文件。如果您不希望构建器访问所有文件，那么您可以将 替换为**/*其他内容。

关于最终生成并将由用户运行的安装程序，安装程序将在用户计算机上创建一个目录，该目录反映由electron-builder. 至少这是我设置中的行为。我将其称为“解压缩”目录。

调用的部分extraFiles将允许您定义额外的文件/文件夹，您可以将这些文件/文件夹从构建器可用的文件中复制到解压目录中。所以我只想将这个eepromStaging从我的项目根目录调用的文件夹复制到解压缩的根目录中。而且我还想将这个二进制文件文件夹从我的项目复制并粘贴到解压目录中。这些文件是“额外的”：它们是在其他所有文件之上添加到解压目录中的文件。这"filter": ["**/*"]意味着所有文件和文件夹都将被复制。

我测试了上述配置，它对我有用：我能够制作一个 exe 安装程序，将我所有额外的二进制文件安装在正确的位置。但是......在我的配置中，我必须使用vue.config.js，如果我尝试将这些属性添加到我的package.json，它不起作用。但最终，我定义的这些属性vue.config.js只是传递到电子生成器属性中。所以我认为您最终指定这些属性的位置取决于您的特定设置，但我认为这些属性本身应该是相同的。因此package.json，如果您只是尝试复制database目录，那么对于您来说，可能的解决方案是将它放在您的.

package.json（这可能不起作用）

...
  "build": {
    "files": [
      "**/*"
    ],
    "extraFiles": [
      {
        "from": "database",
        "to": "database",
        "filter": ["**/*"]
      }
    ]
  },
...

Answer 3

也遇到了这个问题，并找到了files解决方案。这个特定的示例从我的目录复制一个目录node_modules到最终的构建目录中。

即在 Windows 上，它将文件复制到： yourapp.exe/$PLUGINSDIR/app-64.7z/resources/app/

构建器.config.js

module.exports = {
  productName: "myapp",
  appId: "com.reflex.app",
  directories: {
    output: "build",
  },
  files: [
    "package.json",
    {
      // SOLUTION
      from: "yourdirectoryorfilenamehere",
      to: "yourdirectoryorfilenamehere",
      filter: ["**/*"], // This will recursively include all sub-directories & files
    },
  ],
  // ... other configuration here ...
};

然后您可以通过src/renderer/或中的脚本访问最终文件src/main

import { app } from "electron"; // For main process

/* 
Or use this instead for the renderer process: 
import { remote } from 'electron' // For renderer process
const { app } = remote
*/

const path = require("path");
const yourdirectoryorfilenamehere = path.join(app.getAppPath(), "/yourdirectoryorfilenamehere");
console.log(yourdirectoryorfilenamehere) // When built, this will show the path to where all your resources from (`files: []`) were saved