Mackit New

Mackit — Cache cleaner for macOS developers: scans regenerable caches left by Xcode / Node / Flutter and more, risk-labeled, so you can reclaim disk space.

Learn more
Notice We stopped publishing new developer articles in June 2024. Thank you for visiting. Archived posts
知识

如何使用 Electron 打包 exe,解答常见问题?

Electron 是一种用于构建跨平台桌面应用程序的开源框架。它允许使用 Web 技术(如 HTML、CSS 和 JavaScript)创建应用程序,并通过 Electron API 与原生窗口管理集成。在 Electron 开发过程中,如何将应用程序打包成可执行文件(如 exe)是一项常见需求。下面是一个关于 Electron 打包 exe 的简单介绍:
Electron 应用程序打包成 exe 的步骤:
1. 确保已安装 Electron 和所需的依赖项。 2. 在项目根目录下打开终端或命令提示符,并执行以下命令进行打包:`electron-packager <应用目录> <输出目录> --platform=<平台> --arch=<架构>`
例如:`electron-packager.exe app bin/win64`
3. 打包完成后,将在指定输出目录下生成与平台和架构相关的 exe 文件。
Electron 打包 exe 的优势:
* 简化部署过程,用户无需安装 Node.js 和 Electron 即可运行应用程序。 * 支持跨平台部署,适用于 Windows、macOS 和 Linux 等平台。 * 可自定义应用程序图标、版本信息和应用程序名称等属性。
注意事项:
* 请确保使用最新版本的 Electron 和相关依赖项,以得到最佳性能和兼容性。 * 确保应用程序目录中包含所需要的资源文件和配置文件。 * 在打包之前,请备份项目文件以防意外损坏。
希望以上内容对您有所帮助!

在本教程中,我们将带您了解如何使用 Electron 打包 Windows 应用程序(.exe 文件)。Electron 允许将 web 技术(HTML、CSS 和 JavaScript)用于创建桌面应用程序,同时提供一些原生应用特性。我们将学习 Electron 打包原理,并详细介绍相关的库和工具。

### Electron 打包原理

Electron 是用于创建跨平台应用程序的框架。它将 Chromium、Node.js 和用户应用程序捆绑在一起。为了将 Electron 应用程序打包为自包含的 .exe 文件,有一下几个重要的步骤

1. 将应用程序代码、Electron 运行时和系统共享的库捆绑在一起。

2. 创建一个签名的应用程序清单,为应用程序添加版本信息和图标。

3. 生成一个可执行的 .exe 文件,它可以在没有 Electron 环境的 Windows 系统中运行。

### 准备工作

在开始之前,请确保已经安装了以下工具

- Node.js(建议使用最新的 LTS 版本)

- npm(随 Node.js 一起安装)

- Electron(全局安装`npm install -g electron`)

### 教程

本教程将涵盖如何打包 Electron 应用程序。我们将使用 `electron-packager` 这个工具,它是一个命令行工具,用于将 Electron 应用程序捆绑成具有预先生成的 .exe 文件的应用程序。

步骤 1新建应用并安装依赖

```bash

mkdir my-electron-app

cd my-electron-app

npm init

npm install electron --save-dev

```

步骤 2在项目根目录下,创建一个名为 `main.js` 的文件。这是 Electron 应用程序的主入口文件。将下面的代码添加到 `main.js`。

```javascript

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

function createWindow() {

const win = new BrowserWindow({

width: 800,

height: 600,

});

win.loadURL(https://use.relayx.io/);

}

app.on(ready, createWindow);

app.on(window-all-closed, () => {

if (process.platform !== darwin) {

app.quit();

}

});

app.on(activate, () => {

if (BrowserWindow.getAllWindows().length === 0) {

createWindow();

}

});

```

步骤 3将 `package.json` 文件中的 `main` 字段改为 `main: main.js`。接着,添加一个新的 `start` 脚本,如下

```json

scripts: {

start: electron .

}

```

步骤 4测试是否工作,运行以下命令

```bash

npm start

```

步骤 5安装 electron-packager

```bash

npm install electron-packager --save-dev

```

步骤 6将以下内容添加到 `package.json` 文件的 `scripts` 部分。这将创建一个命令行用于打包应用程序。

```json

scripts: {

start: electron .,

package: electron-packager . --out=dist --asar --overwrite --platform=win32 --arch=ia32 --icon=icon.ico --prune=true --version-string.ProductName='My App'

}

```

步骤 7现在,运行以下命令

```bash

npm run package

```

完成以上步骤后,您将在 `dist` 文件夹中找到打包好的应用程序,包括一个 .exe 可执行文件。

本教程只是一个基础示例,开发实际应用程序时可能需要了解更多选项和配置。希望这个教程能帮助您了解 Electron 打包的实现原理和详细操作。如需深入了解 Electron 和 electron-packager,请访问官方文档。

参考链接

- Electron: https://electronjs.org/

- electron-packager: https://github.com/electron/electron-packager