在本教程中，我们将介绍如何使用 JavaScript 生成可执行文件（.exe 文件）。在围绕 JavaScript 的许多用例中，这种方法可以用于为桌面应用程序创建原型。我们将重点介绍一个名为 electron 的流行开源项目。
## Electron 简介
Electron 是一个用于构建跨平台桌面应用程序的框架，它允许使用 JavaScript、HTML 和 CSS。Electron 的原理是将 Chromium 和 Node.js 打包到一个集成的运行时环境中，这样可以为我们提供一个浏览器窗口来呈现 UI，以及一个 Node.js 进程来处理后端逻辑。
## 注：确保你已经安装了最新版本的 Node.js 和 npm。如若未安装，请访问 https://nodejs.org/ 进行安装。
为了实现我们的目标，我们需要执行以下步骤：
### 步骤 1: 初始化项目
首先，在终端中创建一个新项目文件夹并初始化项目。接收所有默认值，这样我们就可以开始使用 Electron 了。
```bash
mkdir js-to-exe
cd js-to-exe/
npm init
```
### 步骤 2: 安装 Electron
安装 Electron 作为项目的开发依赖项。
```bash
npm install electron --save-dev
```
### 步骤 3: 创建应用程序文件
创建一个名为 `main.js` 的文件，这将是我们的应用程序主要的入口点。
```bash
touch main.js
```
同样，创建一个 `index.html` 文件，并添加一些基本的 HTML 模板代码。例如：
```html
```
### 步骤 4: 编辑 main.js 的代码
将以下 JavaScript 代码复制到 `main.js` 文件中，准备设置 Electron 应用程序的主窗口。
```javascript
const { app, BrowserWindow } = require('electron');
function createWindow() {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
});
mainWindow.loadFile('index.html');
// mainWindow.webContents.openDevTools(); // 可以用于调试
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
```
### 步骤 5: 修改 package.json
在 `package.json` 文件中，将 "main" 属性更改为 "main.js"，并添加一个名为 "start" 的新脚本，内容如下：
```json
"main": "main.js",
"scripts": {
...
"start": "electron ."
}
```
现在，运行以下命令以启动 Electron 应用：
```bash
npm start
```
这将打开一个新窗口，显示我们在 `index.html` 文件中编写的内容。
### 步骤 6: 打包可执行文件（.exe）
为了将 Electron 应用程序打包成 .exe 文件，我们将使用一个名为 electron-packager 的工具。首先，安装 electron-packager：
```bash
npm install electron-packager --save-dev
```
接下来，添加以下脚本到 `package.json` 文件的 "scripts" 部分：
```json
"scripts": {
...
"package": "electron-packager ./ --overwrite --platform=win32 --arch=x64 --output=release-builds --icon=app_icon.ico"
}
```
现在，运行下面的命令来打包应用程序：
```bash
npm run package
```
这将在项目根目录下创建一个名为 "release-builds" 的新文件夹。打开文件夹，你就可以找到一个 .exe 文件了，双击运行即可启动 Electron 应用。
至此，我们已经完成了使用 JavaScript 生成可执行文件（exe）的教程。在这个过程中，我们使用了 Electron 框架，它使得创建桌面应用程序变得更加容易。您现在可以使用您在前端开发中学到的相关技能（JavaScript、HTML 和 CSS 等）来创建精美的桌面应用程序。
