在本教程中，我们将介绍应用程序（App）打包生成可执行文件（.exe）的原理和详细步骤。打包生成EXE文件的目的是让用户能直接双击运行应用程序，而无需事先安装编程语言或编译环境。以下主要针对Windows平台进行讲解，分为两部分：原理说明和详细操作步骤。#
2023-06-29
中文化、本土化、云端化的在线跨平台软件开发工具，支持APP、电脑端、小程序、IOS免签等等
### Electron 打包生成 exe 文件（原理与详细介绍）
Electron 是一个使用 JavaScript, HTML 和 CSS 构建跨平台桌面应用的库。它利用 Chromium 渲染引擎和 Node.js 运行环境将 Web 技术整合到桌面应用中。 Electron 打包工具使生成 Windows 平台上的 exe 文件成为可能。以下将详细介绍 Electron 打包原理以及打包过程。
#### 1. Electron 打包原理
Electron 打包的基本原理是将 Web 页面和 Node.js 代码搭建在一个 Chromium 浏览器窗口上，整合成一个独立的应用程序。在跨平台应用中，Electron 能自动识别和处理不同操作系统之间的差异。 打包过程中，Electron 将开发者编写的源代码、Node.js 运行环境以及 Chromium 引擎打包成一个独立的可执行文件。而对于 Windows 平台来说，这个独立的可执行文件就是 exe 文件。
#### 2. 准备环境
首先，需要确保安装了以下环境：
- Node.js
- npm (Node.js 包管理工具)
#### 3. 建立 Electron 项目
创建一个新的目录，然后使用 npm 初始化项目：
```
mkdir electron-app
cd electron-app
npm init
```
接受默认设置或根据需要更改。完成后，会创建一个`package.json`文件。
#### 4. 安装 Electron
在项目中安装 Electron 并将其添加到`dependencies`列表中：
```
npm install electron --save
```
#### 5. 创建 Electron 入口文件
在项目根目录下创建一个名为`main.js`的文件，然后添加以下代码以创建基本的 Electron 应用：
```javascript
const { app, BrowserWindow } = require("electron");
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
});
win.loadFile("index.html");
}
app.whenReady().then(createWindow);
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});
app.on("activate", () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
```
接下来，创建一个简单的`index.html`文件作为项目的主页面。
#### 6. 打包 exe 文件
有多种打包工具可以将 Electron 项目打包成 exe 文件，本教程将使用 popular `electron-builder`。
首先，安装`electron-builder`：
```
npm install electron-builder --save-dev
```
接下来，修改`package.json`文件，添加`build`配置和修改`scripts`中的`start`和`build`命令：
```json
{
...
"main": "main.js",
"scripts": {
"start": "electron .",
"build": "electron-builder --win"
},
"build": {
"appId": "com.example.myapp",
"productName": "MyElectronApp",
"directories": {
"output": "dist"
},
"files": [
"main.js",
"index.html"
],
"win": {
"target": "nsis",
"icon": "icon.ico"
}
},
...
}
```
以下是一些关键元素的解释：
- `appId`: 应用程序的唯一标识符
- `productName`: 应用程序的显示名称
- `directories.output`: 打包结果存放的目录
- `files`: 需要包含在打包结果中的文件
- `win.target`: Windows 操作系统的打包配置，此处使用`nsis`来生成一个可安装的 exe 文件
- `icon`: 生成的 exe 文件和安装程序的图标（可选）
完成配置后，运行以下命令进行打包：
```
npm run build
```
打包成功后，`dist`文件夹中会有一个名为`MyElectronApp Setup x.x.x.exe`的安装程序。用户可以运行此安装程序以安装 Electron 应用。
至此，我们完成了 Electron 应用的打包并生成了 exe 文件。现在，可以将该 exe 文件分发给 Windows 用户体验你的桌面应用程序了。
