李钟意讲前端

外观

咨询/接单/付费bug修复/学习交流群

Electron-Builder 快速入门详细指南 ​

Electron-builder 是一个强大且易用的工具，能帮助我们构建 Electron 应用程序包和分发器。

一、环境安装 ​

  1. vscode https://code.visualstudio.com/Download
  2. node.js https://nodejs.org/zh-cnhttps://nodejs.org/dist/v18.16.0/node-v18.16.0-x64.msi
  3. git https://git-scm.com/downloadshttps://github.com/git-for-windows/git/releases/download/v2.40.1.windows.1/Git-2.40.1-64-bit.exe

二、创建入口 main.js 和 package.json ​

  1. 创建 项目 1-quick-start 目录
bash
mkdir -p 1-quick-start

这条命令创建了一个名为 "1-quick-start" 的目录。其中，mkdir -p 表示递归创建目录，如果父级目录不存在，则会一并创建。

  1. 进入项目目录
bash
cd 1-quick-start

这条命令进入了名为 "1-quick-start" 的目录。cd 是 "change directory" 的缩写，用于切换当前工作目录至指定目录。

  1. 创建文件 main.js
bash
# mac os 使用 touch main.js
ni main.js

这条命令创建了一个名为 "main.js" 的文件。具体的 ni 命令可能是一个自定义的命令别名，它的作用是创建新文件。

main.js 内容如下

js
const {app, BrowserWindow} = require('electron');

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  });

  win.loadFile('index.html');
};

app.whenReady().then(() => {
  createWindow();
});
  1. 创建一个 index.html 文件
bash
# mac os 是 touch index.html
ni index.html

index.html 内容

html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'" />
    <title>你好!</title>
  </head>
  <body>
    <h1>你好!</h1>
    我们正在使用 Node.js <span id="node-version"></span>, Chromium <span id="chrome-version"></span>, 和 Electron
    <span id="electron-version"></span>.
  </body>
</html>
  1. 初始化 package.json
bash
npm init -y

这条命令初始化了一个新的 npm 项目，并生成了一个名为 "package.json" 的文件。npm init 用于创建新的 npm 项目，-y 参数表示使用默认配置而不需要用户进行交互式设置。生成的 "package.json" 文件包含了项目的元数据和依赖信息。

三、安装 Electron 和 Electron-builder ​

首先，我们需要在项目中安装 Electron。打开你的终端，进入到你的项目根目录，然后运行以下命令：

bash
npm install electron --save-dev

如果出现下面错误，请使用 .npmrc 文件配置淘宝镜像

bash
# mac os 使用 touch .npmrc
ni .npmrc

.npmrc 文件内容如下

ini
registry=https://registry.npmmirror.com/
electron_mirror=https://npmmirror.com/mirrors/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/

重新 npm install electron --save-dev，出现下面效果，没有报错就是成功

bash
PS D:\Desktop\electron-start-1\1-quick-start> npm install electron --save-dev

> electron@25.0.1 postinstall D:\Desktop\electron-start-1\1-quick-start\node_modules\electron
> node install.js

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN 1-quick-start@1.0.0 No description
npm WARN 1-quick-start@1.0.0 No repository field.

+ electron@25.0.1
added 72 packages from 95 contributors in 20.732s

18 packages are looking for funding
  run `npm fund` for details
PS D:\Desktop\electron-start-1\1-quick-start> npm install electron --save-dev

> electron@25.0.1 postinstall D:\Desktop\electron-start-1\1-quick-start\node_modules\electron
> node install.js

RequestError: connect ETIMEDOUT 185.199.110.133:443
    at ClientRequest.<anonymous> (D:\Desktop\electron-start-1\1-quick-start\node_modules\got\dist\source\core\index.js:970:111)
    at Object.onceWrapper (events.js:520:26)
    at ClientRequest.emit (events.js:412:35)
    at ClientRequest.origin.emit (D:\Desktop\electron-start-1\1-quick-start\node_modules\@szmarczak\http-timer\dist\source\index.js:43:20)
    at TLSSocket.socketErrorListener (_http_client.js:475:9)
    at TLSSocket.emit (events.js:400:28)
    at emitErrorNT (internal/streams/destroy.js:106:8)
    at emitErrorCloseNT (internal/streams/destroy.js:74:3)
    at processTicksAndRejections (internal/process/task_queues.js:82:21)
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1159:16)
npm WARN 1-quick-start@1.0.0 No description
npm WARN 1-quick-start@1.0.0 No repository field.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! electron@25.0.1 postinstall: `node install.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the electron@25.0.1 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2023-05-31T23_13_39_714Z-debug.log

这个命令将会安装 Electron 并将其保存在你的项目的 devDependencies 下。

接着，我们需要安装 electron-builder。同样的，在终端中运行以下命令：

bash
npm install electron-builder --save-dev

这个命令将会安装 electron-builder 并将其保存在你的项目的 devDependencies 下。

四、 配置 Electron-builder ​

Electron-builder 需要一个配置文件来告诉它如何打包你的 Electron 应用。你可以在 package.json 文件中直接添加，也可以创建一个新的 .json 或 .yaml 配置文件。这里我们在项目根目录创建一个 electron-builder.yml 文件，然后在其中添加以下代码：

bash
# mac os 使用 touch electron-builder.json
ni electron-builder.json

electron-builder.json

json
{
  "appId": "com.example.app",
  "productName": "MyApp",
  "files": ["package.json", "main.js", "index.html"],
  "directories": {
    "output": "build"
  }
}

这段代码的含义如下：

  • appId 是你的应用的唯一标识符，通常使用域名反转的方式（如 com.example.app）。
  • productName 是你的应用的名称，用户看到的就是这个名字。
  • files 配置了需要被打包的文件。"package.json", "main.js", "index.html"。
  • directories.output 配置了打包后的文件输出目录，这里我们将其设置为 build。

五、创建构建脚本 ​

要构建你的 Electron 应用程序，我们需要在 package.json 的 scripts 部分添加一个 build 脚本，如下所示：

json
{
  "name": "1-quick-start",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^25.0.1",
    "electron-builder": "^23.6.0"
  }
}

这段代码的含义如下：

  • name，version 和 description 是你的应用的基本信息。
  • main 是你的应用的主要入口文件，通常是 main.js。
  • scripts 包含了两个脚本：start 和 build。start 脚本用于启动你的 Electron 应用，build 脚本用于构建你的 Electron 应用。

六、启动项目 ​

bash
npm start

七、构建应用 ​

现在，一切准备就绪。你可以使用以下命令构建你的 Electron 应用程序：

bash
npm run build

运行这个命令后，electron-builder 将开始构建你的应用。构建完成后，你会在 build 目录中找到生成的应用程序包。

这只是 Electron-builder 的快速入门指南，更多详细的配置选项和功能请参考 Electron-builder 的官方文档。

八、参考的网站 ​

https://www.electronjs.org/zh/docs/latest/tutorial/quick-start

https://www.electron.build/

https://github.com/electron-userland/electron-builder