在本教程中，我們將學習如何將HTML項目打包為可執行的EXE文件。通過這種方式，您可以將HTML項目視為獨立的應用程序，而無需用戶擁有Web瀏覽器。
## 原理
HTML項目包含HTML、CSS、JavaScript等文件，瀏覽器負責解釋這些文件并將其顯示為可視化界面。打包HTML項目為EXE文件，實際上是將這些資源文件和一個簡易的web瀏覽器引擎綁定在一起，使得程序能夠在不需要額外瀏覽器的情況下單獨運行。
## 方法1：使用Electron
Electron是一個基于Node.js和Chromium的跨平臺框架，用于將Web應用程序轉換為桌面應用程序。Electron桌面應用程序允許您使用HTML、CSS和JavaScript編寫用戶界面。以下是將HTML項目打包為EXE文件的步驟：
### 步驟1：安裝Node.js
訪問[Node.js官方網站vs生成的exe怎么給別人用](https://nodejs.org/)，下載并安裝適用于您的操作系統的最新LTS版本。安裝完成后，通過運行以下命令確認安裝已成功：
“`bash
node -v
npm -v
“`
這些命令應顯示Node.js和npm的版本。
### 步驟2：創建Electron應用程序
創建一個新目錄以容納您的Electron應用程序，并導航到該目錄：
“`bash
mkdir my-electron-app
cd my-electron-app
“`
運行以下命令以創建一個新的package.json文件：
“`bash
npm init
“`
按照提示填寫相關信息，如項目名稱、版本等。
接下來，安裝Electron依賴項：
“`bash
npm install electron –save-dev
“`
### 步驟3：添加您的HTML項目
將您的HTML項目中的所有文件（例如index.html、CSS、JavaScript等）復制到應用程序目錄中。
創建一個名為“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’文件。
更新package.json文件中的“scripts”部分以添加“start”命令：
“`json
“scripts”: {
“start”: “electron .”
}
“`
現在，您可以在命令行中運行以下命令，用Electron打開您的HTML項目：
“`bash
npm start
“`
### 步驟4：打包為EXE文件
要將項目打包成EXE文件，需要使用名為’electron-packager’的npm包。首先安裝它：
“`bash
npm install electron-packager -g
“`
然后運行以下命令以創建EXE文件：
“`bash
electron-packager . –platform=win32 –arch=x64
此命令將在一個新目錄中創建一個.EXE文件，其中包含您的完整Electron應用程序以及Node.js和Chromium運行時。現在您可以將這個EXE文件分發給其他人，他們可以在沒有安裝瀏覽器的情況下運行您的HTML項目。
## 方法2：使用NW.js
[NW.js](https://nwjs.io/)是一種將HTML5、CSS3、JavaScript等技術創建的Web應用打包成本地應用的解決方案。您可以使用這個方法將HTML項目打包為EXE文件。具體步驟類似于使用Electron的方法。
首先下載NW.js，然后將其解壓為一個文件夾。創建一個package.json文件。這個文件告訴NW.js應用程序的入口點，應該包括一個“main”字段，指向HTML文件
。
“`json
{
“name”: “my-nwjs-app”,
“version”: “1.0.0”,
“description”: “A sample NW.js application”,
“main”: “index.html”,
“scripts”: {
“start”: “nw .”
},
“author”: “Your Name”,
“license”: “MIT”,
“dependencies”: {}
}
“`
將此文件和您的HTML項目文件一起放入解壓縮的NW.js文件夾中。通過運行以下命令安裝’npm’:
“`bash
npm install
“`
現在，您可以使用下面的命令啟動應用程序：
“`bash
npm start
“`
創建EXE文件，請參閱[NW.js打包指南](https://nwjs.readthedocs.io/en/latest/For%20Users/Package%20and%20Distribute/)
總之，以上就是將HTML項目打包為EXE文件的兩種方法。這將HTML項目視為獨立的應用程序而無需額外的瀏覽器。雖然我們在這里介紹了兩種流行的方法，但還有其他像[Web2Executable](https://github.com/jyapayne/Web2Executable)這樣的工具也可以進行類似的操作。可以視具體情況選擇合適的方法。
