web-dev-qa-db-fra.com

Comment ajouter des dossiers et des fichiers à Electron Build à l'aide d'Electron Builder

Je crée un électron qui exécute React généré à partir de create-react-app. Ensuite, j'ajoute nedbjs (une base de données de persistance) et camojs (ODM pour nedb) comme dépendance. Pour me connecter, réagissez avec nedb, j'utilise l'ipc électronique.

Voici ma structure de projet:

enter image description here

Et voici mon 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"
    }
  },

J'utilise le paquet d'électrons de fil de commande pour emballer mon application. Et puis en exécutant l'exécutable décompressé du dossier dist, j'ai obtenu cette erreur:

enter image description here

Voici mon repo

javascriptelectronelectron-builder
7
Afdal Lismen

Pour ajouter un fichier ou un dossier sur votre dossier de construction d'électrons, vous pouvez ajouter les options extraFiles sur package.json. Voici un exemple pour copier un répertoire "credential":

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

Puis

$ npm run release // as usual

J'espère que cela vous aidera

11
thomasL

J'utilise un vue + bibliothèque d'électrons ( https://github.com/nklayman/vue-cli-plugin-electron-builder ). I'm en utilisant les éléments suivants:

  • électron 5.0.13
  • vue 2.6.10
  • vue-cli-plugin-electron-builder 1.4.0

Avec cette configuration particulière, les éléments suivants vue.config.js le fichier m'a permis de copier et coller quelques répertoires de mon projet dans la version électronique:

vue.config.js (fonctionne sur ma configuration) 

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

Donc je pense c'est ce qui se passe:

**/* est un modèle global, ce qui signifie "correspondre à tous les fichiers". Le files: [**/*] dans vue.config.js mettra l'intégralité du répertoire de votre projet à la disposition du constructeur. Cependant, cela ne signifie pas que les fichiers seront dans votre répertoire de construction: cela signifie simplement que les fichiers sont disponibles pour le constructeur lors de la construction. Si vous ne souhaitez pas que le générateur ait accès à tous les fichiers, vous devez remplacer le **/* avec autre chose.

En ce qui concerne le programme d'installation qui est finalement créé et qui sera exécuté par un utilisateur, le programme d'installation créera un répertoire sur l'ordinateur de l'utilisateur qui reflète le répertoire "build/win-unpacked" créé par electron-builder. C'est du moins le comportement dans ma configuration. J'appellerai cela le répertoire "décompressé".

La section intitulée extraFiles vous permettra de définir des fichiers/dossiers supplémentaires que vous pouvez copier dans votre répertoire décompressé, à partir des fichiers disponibles pour le générateur. Je voulais donc simplement copier ce dossier appelé eepromStaging de mon répertoire racine de projet, dans le répertoire racine décompressé. Et je voulais également copier et coller ce dossier de fichiers binaires de mon projet dans le répertoire décompressé. Et ces fichiers sont "supplémentaires": ce sont des fichiers qui sont ajoutés à votre répertoire décompressé en plus de tout le reste. Le "filter": ["**/*"] signifie que tous les fichiers et dossiers vont être copiés.

J'ai testé la configuration ci-dessus et cela fonctionne pour moi: je suis en mesure de créer un programme d'installation exe qui installe tous mes fichiers binaires supplémentaires au bon endroit. Cependant ... dans ma configuration, je dois utiliser vue.config.js, et si j'essaie d'ajouter ces propriétés à mon package.json, ça ne marche pas. En fin de compte cependant, ces propriétés que je définis dans vue.config.js passe simplement dans les propriétés du générateur d'électrons. Je pense donc que l'endroit où vous finissez par spécifier ces propriétés dépend de votre configuration particulière, mais je pense que ces propriétés elles-mêmes devraient être les mêmes. Alors peut-être qu'une solution pour vous serait de mettre ceci dans votre package.json, si vous essayez simplement de copier le répertoire database, mais je ne suis pas sûr.

package.json (cela peut ne pas fonctionner) 

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