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文件夹运行解压缩的可执行文件，然后出现此错误：

这是my repo

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
vue 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": ["**/*"]
            }
          ]
        }
      }
    }
  }

所以我认为这是怎么回事：

**/*是一种全局模式，表示“匹配所有文件”。 files: [**/*]中的vue.config.js将使整个项目目录可供构建器使用。但是，这并不意味着文件将在构建目录中；它只是意味着构建时文件对构建器可用。如果您不希望构建器有权访问所有文件，则可以将**/*替换为其他内容。

关于最终完成并由用户运行的安装程序，安装程序将在用户计算机上创建一个目录，该目录镜像由electron-builder创建的“ build / win-unpacked”目录。至少这是我的设置中的行为。我将其称为“未打包”目录。

名为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/

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

如何使用电子构建器

3 个答案: