web-dev-qa-db-ja.com

electron-builderを使用してフォルダーとファイルをelectronビルドに追加する方法

Create-react-appから生成されたreactを実行する電子を作成しています。次に、依存関係としてnedbjs（永続データベース）とcamojs（ODM for nedb）を追加します。 nedbと反応するように接続するには、electron ipcを使用します。

これが私のプロジェクト構造です：

enter image description here

そしてここに私の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フォルダーから解凍された実行可能ファイルを実行すると、次のエラーが発生します。

enter image description here

これが my repo です

javascriptelectronelectron-builder
7
Afdal Lismen

Electronビルドフォルダーにファイルまたはフォルダーを追加するには、package.jsonにextraFilesオプションを追加します。 「credential」ディレクトリをコピーする例を次に示します。

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

その後

$ npm run release // as usual

それが役に立てば幸い

11
thomasL

私はvue + electron library（ 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ファイルを使用して、プロジェクトからいくつかのディレクトリをコピーしてelectronビルドに貼り付けることができました。

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を使用すると、プロジェクトディレクトリ全体をビルダーで使用できるようになります。ただし、これは、ファイルがinビルドディレクトリになることを意味するわけではありません。つまり、ファイルがに使用できるビルド時のビルダー。ビルダーにすべてのファイルへのアクセスを許可したくない場合は、**/*を別のものに置き換えます。

最終的に作成され、ユーザーによって実行されるインストーラーに関して、インストーラーは、electron-builderによって作成される「build/win-unpacked」ディレクトリをミラーリングするディレクトリをユーザーのコンピューターに作成します。少なくともこれは私のセットアップの動作です。これを「解凍された」ディレクトリと呼びます。

extraFilesというセクションでは、ビルダーで使用可能なファイルから、解凍したディレクトリにコピーできる追加のファイル/フォルダーを定義できます。ですから、プロジェクトルートディレクトリからeepromStagingという名前のこの1つのフォルダーを、解凍されたルートディレクトリにコピーしたいと思いました。また、このバイナリファイルのフォルダをプロジェクトから解凍したディレクトリにコピーして貼り付けたいとも思っていました。そして、これらのファイルは「特別」です：それらは他のすべての上に解凍されたディレクトリに追加されるファイルです。 "filter": ["**/*"]は、すべてのファイルとフォルダーがコピーされることを意味します。

上記の構成をテストしましたが、うまくいきました。すべての追加のバイナリファイルを正しい場所にインストールするexeインストーラーを作成できます。ただし、私の構成ではvue.config.jsを使用する必要があります。これらのプロパティをpackage.jsonに追加しようとしても機能しません。結局のところ、私がvue.config.jsで定義しているこれらのプロパティは、単純にelectronビルダーのプロパティに渡されます。したがって、これらのプロパティを指定する場所は特定のセットアップに依存すると思いますが、これらのプロパティ自体は同じである必要があると思います。したがって、databaseディレクトリをコピーしようとしているだけなら、これをpackage.jsonに配置することで解決できるかもしれませんが、よくわかりません。

package.json（これは機能しない可能性があります）

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