在本教程中，我们将讨论如何使用 JavaScript 开发 EXE 程序。尽管 JavaScript 本身是一种客户端脚本语言，主要用于浏览器进行脚本编写，但借助一些框架和工具，我们可以将其用于桌面应用程序开发。本篇文章将对使用 Electron 框架构建和打包跨平台的桌面应用程序进行详细介绍。
### Electron 简介
Electron 是一个由 GitHub 开发，使用 JavaScript、HTML 和 CSS 编写的跨平台桌面应用程序开发框架。它基于 Node.js 运行时环境和 Chromium 浏览器，并提供了丰富的 API，可以实现桌面应用程序中常见的功能，如操作系统级别的通知、文件操作等。
### 开始之前的准备
在使用 Electron 构建桌面应用程序之前，确保您的系统已安装以下软件：
1. Node.js (最新 LTS 版本)
2. npm （通常会随 Node.js 一起安装）
3. 编辑器（如 Visual Studio Code、Sublime Text等）
### Electron 应用程序开发步骤
接下来，我们将以电子应用程序的开发为例，讲解其基本步骤。
#### Step 1: 初始化项目
首先创建一个新的文件夹作为项目根目录，然后执行以下命令以设置项目的基本结构和初始化 `package.json` 文件：
```bash
mkdir my-electron-app
cd my-electron-app
npm init -y
```
#### Step 2: 安装 Electron
使用以下命令安装 Electron 及其依赖库：
```bash
npm install electron --save-dev
```
#### Step 3: 创建 Electron 入口文件
在项目根目录下创建一个名为 `main.js` 的文件，这将作为 Electron 应用程序的入口文件。接着，使用以下代码设置基本的 Electron 应用程序结构：
```javascript
const { app, BrowserWindow } = require('electron')
function createWindow () {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
}
})
mainWindow.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()
}
})
```
#### Step 4: 创建界面文件
在项目根目录下创建一个名为 `index.html` 的文件，将作为应用程序的主界面。接着，输入以下内容：
```html
Hello, Electron!
```
#### Step 5: 配置 `package.json` 文件
打开 `package.json` 文件，将其中的 `"main"` 字段值修改为 `"main.js"`，并添加一个新的 `"start"` 脚本：
```json
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "electron .",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^12.0.2"
}
}
```
#### Step 6: 运行 Electron 应用程序
执行以下命令运行 Electron 应用程序：
```bash
npm start
```
一旦运行成功，您将看到一个简单的 Electron 桌面应用程序，上面显示 "Hello, Electron!"。
### 打包为 EXE 文件
要将 Electron 应用程序转换为 EXE 文件，我们可以使用名为 electron-builder 的工具。首先，执行以下命令安装 electron-builder：
```bash
npm install electron-builder --save-dev
```
接着，在项目的 `package.json` 文件中增加一个 `"build"` 配置段落：
```json
"build": {
"appId": "com.example.my-electron-app",
"productName": "MyElectronApp",
"win": {
"target": [
"nsis"
]
},
"mac": {
"target": [
"dmg"
]
},
"linux": {
"target": [
"AppImage",
"deb"
]
}
}
```
现在，我们可以添加一个新的脚本命令来运行 electron-builder。在 `package.json` 文件的 "scripts" 部分添加以下内容：
```json
"scripts": {
...
"build": "electron-builder"
},
```
最后，运行以下命令生成 EXE 文件：
```bash
npm run build
```
在项目根目录下的 `dist` 文件夹中，您将找到已打包好的 EXE 文件。在需要的时候，将其分发给用户即可。
### 结论
在本文中，我们讲解了如何使用 Electron 和 JavaScript 开发 EXE 程序，并演示了如何创建、运行和打包 Electron 桌面应用程序。希望这篇文章能帮助您顺利开发自己的桌面应用程序！
