如何使用 electron-builder 将文件夹和文件添加到 electron build

Question

我正在创建一个运行从 create-react-app 生成的反应的电子。 然后我添加 nedbjs（持久性数据库）和 camojs（nedb 的 ODM）作为依赖项。 为了连接与 nedb 的反应，我使用 electron 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"
    }
  },

我使用命令 yarn electron-pack 来打包我的应用程序。 然后从 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 模式，意思是“匹配所有文件”。 vue.config.js中的files: [**/*]将使您的整个项目目录可供构建器使用。 但是，这并不意味着这些文件将位于您的构建目录中：它仅意味着构建器在构建时可以使用这些文件。 如果您不希望构建器访问所有文件，那么您可以将**/*替换为其他内容。

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

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

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

package.json（这可能行不通）

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

Answer 3

也遇到了这个问题，并发现files属性是解决方案。 这个特定的示例将一个目录从我的node_modules到最终的构建目录中。

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

builder.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