在本教程中，我們將介紹如何將HTML應用程序封裝成獨立的EXE文件。這對于發布一個基于Web技術構建的簡單桌面應用程序非常有用。我們將通過兩個步驟來完成這個過程：首先，使用Node.js和Electron構建應用程序；然后，使用electron-builder將應用程序打包成EXE文件。
### 準備工作
在開始之前，請確保已安裝以下工具：
1. Node.js：請前往Node.js官方網站(https://nodejs.org/)下載并安裝對應操作系統的版本。
### 使用Electron構建應用程序
Electron是一個流行的開源框架，允許開發者使用Web技術（如HTML、CSS和JavaScript）創建跨平臺的桌面應用程序。
#### 步驟1：創建項目文件夾
創建一個新文件夾，如“my-html-app”，用于存放項目文件。
#### 步驟2：初始化項目
打開命令行/終端，導航至剛剛創建的文件夾，運行以下命令以初始化項目：
“`
npm init -y
“`
這將創建一個名為“package.json”的文件。
#### 步驟3：安裝Electron
接下來，運行以下命令以安裝Electron：
“`
npm install electron –save-dev
“`
以上操作將在“package.json”文件中添加“devDependencies”。
#### 步驟4：創建HTML頁面和JavaScript文件
在項目文件夾中，創建一個名為“index.html”的文件，填寫以下內容：
“`html
歡迎使用我的HTML應用程序
“`
同時，在項目文件夾中創建一個名為“main.js”的文件以用于Electron，填寫以下內容：
“`javascript
const { app, BrowserWindow } = require(“electron”);
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
win.l一鍵生成exeoadFile(“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();
}
});
“`
#### 步驟5：更新“package.json”
將以下內容添加到“package.json”文件的“scripts”部分：
“`json
“start”: “electron .”
“`
此時“package.json”文件大致如下：
“`json
{
“name”: “my-html-app”,
“version”: “1.0.0”,
“description”: “”,
“main”: “main.js”,
“scripts”: {
“start”: “electron .”,
“test”: “echo \”Error: no test specified\” && exit 1″
},
“author”: “”,
“lice
nse”: “ISC”,
“devDependencies”: {
“electron”: “^版本號”
}
}
“`
#### 步驟6：運行應用程序
在命令行/終端中，輸入以下命令以運行應用程序：
“`
npm打包生成exe start
“`
此時，應該可以看到一個新的窗口，顯示“歡迎使用我的HTML應用程序”。
### 使用electron-builder打包EXE文件
electron-builder是一個用于打包和發布Electron應用程序的工具。
#### 步驟1：安裝electron-builder
在命令行/終端中，運行以下命令以安裝electron-builder：
“`
npm install electron-builder –save-dev
“`
安裝完成后，會將“electron-builder”添加至“devDependencies”。
#### 步驟2：配置electron-builder
在“package.json”文件中，添加以下配置信息：
“`json
“build”: {
“appId”: “com.example.my-html-app”,
“win”: {
“target”: “nsis”
},
“nsis”: {
“oneClick”: false,
“allowToChangeInstallationDirectory”: true
}
}
“`
同時，在“package.json”的“scripts”部分添加以下內容：
“`json
“pack”: “electron-builder –dir”,
“dist”: “electron-builder”
“`
#### 步驟3：生成EXE文件
在命令行/終端中，運行以下命令以生成EXE文件：
“`
npm run dist
“`
此過程可能需要幾分鐘的時間。完成后，在“dist”文件夾下會找到生成的EXE文件。
現在，已成功將HTML應用程序封裝成獨立的EXE文件。發行該應用程序時，只需分發在“dist”目錄下生成的EXE文件即可。
