HTML5 封装为 EXE 可执行文件主要是将一个基于 HTML5、CSS和 JavaScript 的网页应用程序转换为一个本地运行的桌面应用程序。这可以通过使用 "Webview" 或 "Webkit" 这样的框架实现，这些框架可以在一个本地应用程序中嵌入 web 浏览器。流行的工具包括 Electron、NW.js 和 Cordova 等。这里我们详细介绍使用 Electron 进行封装的过程。
Electron 是跨平台开发的桌面应用程序的框架，由 Github 开发并维护。它使用 Node.js 和 Chromium 提供了一个为桌面应用程序提供原生功能的环境。大多数流行的桌面应用程序如 VS Code、Slack，和WhatsApp 都是使用 Electron 来构建的。
请按照以下步骤将 HTML5 封装为 EXE 文件：
1. 安装 Node.js:
请确保已经安装了 Node.js。可以从 https://nodejs.org/en/download/ 下载。
2. 安装 Electron:
打开命令提示符 （CMD）或终端, 输入以下命令:
```bash
npm install -g electron
```
这将全局安装 Electron 到您的计算机。
3. 创建项目文件夹:
创建一个名为 "my-html5-exe" 的新文件夹，然后导航到该文件夹：
```bash
mkdir my-html5-exe
cd my-html5-exe
```
4. 初始化项目:
在项目文件夹中，输入以下命令以初始化项目:
```bash
npm init
```
按照提示完成初始化过程。其中的 "entry point" 输入 "main.js"。
5. 安装 Electron 到项目依赖:
```bash
npm install electron --save-dev
```
6. 创建网页文件:
在项目文件夹中，创建以下文件:
- index.html
- main.js
将您的 HTML5 内容放入 index.html 文件中。
7. 编写 main.js:
在 main.js 文件中，添加以下内容:
```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 文件。
8. 修改 package.json:
将 "scripts" 字段替换为以下内容:
```json
"scripts": {
"start": "electron ."
}
```
9. 运行应用程序:
在项目文件夹中，运行以下命令:
```bash
npm start
```
此时您应该会看到一个包含您的 HTML5 内容的 Electron 窗口。
10. 打包为 EXE 文件:
我们将使用 electron-packager 进行打包，首先安装它:
```bash
npm install electron-packager --save-dev
```
然后在 package.json 的 "scripts" 字段添加以下内容:
```json
"scripts": {
"start": "electron .",
"package": "electron-packager . my-html5-exe --platform=win32 --arch=x64 --out=release --overwrite"
}
```
现在，运行以下命令将打包生成 EXE 文件：
```bash
npm run package
```
打包完成后，可在项目文件夹下的 "release" 文件夹中找到生成的 EXE 文件。
