[英]How to add folders and files to electron build using electron-builder
I am creating an electron which running react generated from create-react-app.我正在创建一个运行从 create-react-app 生成的反应的电子。 Then i add nedbjs(a persistence database) and camojs(ODM for nedb) as dependency.
然后我添加 nedbjs(持久性数据库)和 camojs(nedb 的 ODM)作为依赖项。 To connect react with nedb i use electron ipc.
为了连接与 nedb 的反应,我使用 electron ipc。
Here is my project structure:这是我的项目结构:
And here is my package.json:这是我的 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"
}
},
I use command yarn electron-pack to package my app.我使用命令 yarn electron-pack 来打包我的应用程序。 And then running the unpacked executable from dist folder then got this error:
然后从 dist 文件夹运行解压的可执行文件然后得到这个错误:
To add a file or folder on your electron build folder, you can add the extraFiles options on package.json.要在电子构建文件夹中添加文件或文件夹,您可以在 package.json 中添加 extraFiles 选项。 Here is an example to copy a "credential" directory:
以下是复制“凭据”目录的示例:
"build": {
"appId": "com.example.electron-boilerplate",
"files": [
"app/**/*",
"node_modules/**/*",
"package.json"
],
"directories": {
"buildResources": "resources"
},
"extraFiles": [
"credentials"
],
"publish": null
},
And then接着
$ npm run release // as usual
Hope it will help希望它会有所帮助
I'm using a vue + electron library ( https://github.com/nklayman/vue-cli-plugin-electron-builder ).我正在使用 vue + 电子库 ( https://github.com/nklayman/vue-cli-plugin-electron-builder )。 I'm using the following:
我正在使用以下内容:
With that particular configuration, The following vue.config.js
file was able to let me copy & paste a couple of directories from my project into the electron build:使用该特定配置,以下
vue.config.js
文件能够让我将项目中的几个目录复制并粘贴到电子构建中:
vue.config.js (works on my setup) 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": ["**/*"]
}
]
}
}
}
}
So I think this is what's going on:所以我认为这是正在发生的事情:
**/*
is a glob pattern, which means "match all files". **/*
是一个 glob 模式,意思是“匹配所有文件”。 The files: [**/*]
in vue.config.js
will make your entire project directory available to the builder. vue.config.js
中的files: [**/*]
将使您的整个项目目录可供构建器使用。 However, this doesn't mean that the files will be in your build directory: it just means that the files are available to the builder when building.但是,这并不意味着这些文件将位于您的构建目录中:它仅意味着构建器在构建时可以使用这些文件。 If you didn't want the builder to have access to all files, then you'd replace the
**/*
with something else.如果您不希望构建器访问所有文件,那么您可以将
**/*
替换为其他内容。
Regarding the installer that ultimately gets made and will be run by a user, the installer will create a directory on the user computer that mirrors the "build/win-unpacked" directory that gets made by electron-builder
.关于最终制作并由用户运行的安装程序,安装程序将在用户计算机上创建一个目录,该目录反映由
electron-builder
制作的“build/win-unpacked”目录。 At least this is the behavior in my setup.至少这是我设置中的行为。 I'll refer to that as the "unpacked" directory.
我将其称为“解压”目录。
The section called extraFiles
will let you define extra files/folders that you can copy into your unpacked directory, from the files that are available to the builder.名为
extraFiles
的部分将允许您定义额外的文件/文件夹,您可以从构建器可用的文件中将其复制到解压缩的目录中。 So I wanted to just copy this one folder called eepromStaging
from my project root directory, into the unpacked root directory.所以我只想将这个名为
eepromStaging
的文件夹从我的项目根目录复制到解压的根目录中。 And I also wanted to copy & paste this folder of binary files from my project into the unpacked directory.而且我还想将这个二进制文件文件夹从我的项目复制并粘贴到解压目录中。 And these files are "extra": they're files that get added to your unpacked directory on top of everything else.
这些文件是“额外的”:它们是添加到解压缩目录中的所有其他文件之上的文件。 The
"filter": ["**/*"]
means that all of the files and folders are going to be copied over. "filter": ["**/*"]
表示所有文件和文件夹都将被复制过来。
I tested out the above configuration and it works for me: I'm able to make an exe installer that installs all my extra binary files in the correct location.我测试了上面的配置,它对我有用:我能够制作一个 exe 安装程序,将我所有额外的二进制文件安装在正确的位置。 However... in my configuration, I have to use
vue.config.js
, and if I try to add these properties to my package.json
, it doesn't work.但是......在我的配置中,我必须使用
vue.config.js
,如果我尝试将这些属性添加到我的package.json
,它不起作用。 Ultimately though, these properties that I'm defining in vue.config.js
simply get passed into the electron builder properties.不过,最终,我在
vue.config.js
中定义的这些属性只是简单地传递到 electron builder 属性中。 So I think where you end up specifying these properties depends on your particular setup, but I think that these properties themselves should be the same.所以我认为您最终指定这些属性的位置取决于您的特定设置,但我认为这些属性本身应该是相同的。 So maybe a solution for you would be to put this in your
package.json
, if you're just trying to copy over database
directory, but I'm not sure.因此,如果您只是想复制
database
目录,那么也许您的解决方案是将其放入您的package.json
中,但我不确定。
package.json (this may not work) package.json(这可能行不通)
...
"build": {
"files": [
"**/*"
],
"extraFiles": [
{
"from": "database",
"to": "database",
"filter": ["**/*"]
}
]
},
...
Was running into issues with this as well, and found the files
property to be the solution.也遇到了这个问题,并发现
files
属性是解决方案。 This particular example copies a directory from my node_modules
into the final build directory.这个特定的示例将一个目录从我的
node_modules
到最终的构建目录中。
ie on Windows, it copies the files to: yourapp.exe/$PLUGINSDIR/app-64.7z/resources/app/即在 Windows 上,它将文件复制到: yourapp.exe/$PLUGINSDIR/app-64.7z/resources/app/
builder.config.js 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 ...
};
And then you can access the final files via a script in src/renderer/
or src/main
然后您可以通过
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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.