在本教程中，我們將介紹如何使用 JavaScript 生成可執(zhí)行文件（.exe 文件）。在圍繞 JavaScript 的許多用例中，這種方法可以用于為桌面應(yīng)用程序創(chuàng)建原型。我們將重點(diǎn)介紹一個(gè)名為 electron 的流行開(kāi)源項(xiàng)目。
## Electron 簡(jiǎn)介
Electron 是一個(gè)用于構(gòu)建跨平臺(tái)桌面應(yīng)用程序的框架，它允許使用 JavaScript、HTML 和 CSS。Electron 的原理是將 Chromium 和 Node.js 打包到一個(gè)集成的運(yùn)行時(shí)環(huán)境中，這樣可以為我們提供一個(gè)瀏覽器窗口來(lái)呈現(xiàn) UI，以及一個(gè) Node.js 進(jìn)程來(lái)處理后端邏輯。
## 注：確保你已經(jīng)安裝了最新版本的 Node.js 和 npm。如若未安裝，請(qǐng)?jiān)L問(wèn) https://nodejs.org/ 進(jìn)行安裝。
為了實(shí)現(xiàn)我們的目標(biāo)，我們需要執(zhí)行以下步驟：
### 步驟 1: 初始化項(xiàng)目
首先，在終端中創(chuàng)建一個(gè)新項(xiàng)目文件夾并初始化項(xiàng)目。接收所有默認(rèn)值，這樣我們就可以開(kāi)始使用 Electron 了。
“`bash
mkdir js-to-exe
cd js-to-exe/
npm init
“`
### 步驟 2: 安裝 Electron
安裝 Electron 作為項(xiàng)目的開(kāi)發(fā)依賴項(xiàng)。
“`bash
npm install electron –save-dev
“`
### 步驟 3: 創(chuàng)建應(yīng)用程序文件
創(chuàng)建一個(gè)名為 `main.js` 的文件，這將是我們的應(yīng)用程序主要的入口點(diǎn)。
“`bash
touch main.js
“`
同樣，創(chuàng)建一個(gè) `index.html` 文件，并添加一些基本的 HTML 模板代碼。例如：
“`html
Hello World from Electron
“`
### 步驟 4: 編輯 main.js 的代碼
將以下 JavaScript 代碼復(fù)制到 `main.js` 文件中，準(zhǔn)備設(shè)置 Electron 應(yīng)用程序的主窗口。
“`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(); // 可以用于調(diào)試
}
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” 屬性pb制作exe更改為 “main.js”，并添加一個(gè)名為 “start” 的新腳本，內(nèi)容如下：
“`json
“main”: “main.js”,
“scripts”: {
…
“start”: “electron .”
}
“`
現(xiàn)在，運(yùn)行以下命令以啟動(dòng) Electron 應(yīng)用：
“`bash
npm start
“`
這將打開(kāi)一個(gè)新窗口，顯示我們?cè)?`index.html` 文件中編寫(xiě)的內(nèi)容。
#
## 步驟 6: 打包可執(zhí)行文件（.exe）
為了將 Electron 應(yīng)用程序打包成 .exe 文件，我們將使用一個(gè)名為 electron-packager 的工具。首先，安裝 electron-packager：
“`bash
npm install electron-packager –save-dev
“`
接做exercise的短語(yǔ)下來(lái)，添加以下腳本到 `package.json` 文件的 “scripts” 部分：
“`json
“scripts”: {
…
“package”: “electron-packager ./ –overwrite –platform=win32 –arch=x64 –output=release-builds –icon=app_icon.ico”
}
“`
現(xiàn)在，運(yùn)行下面的命令來(lái)打包應(yīng)用程序：
“`bash
npm run package
“`
這將在項(xiàng)目根目錄下創(chuàng)建一個(gè)名為 “release-builds” 的新文件夾。打開(kāi)文件夾，你就可以找到一個(gè) .exe 文件了，雙擊運(yùn)行即可啟動(dòng) Electron 應(yīng)用。
至此，我們已經(jīng)完成了使用 JavaScript 生成可執(zhí)行文件（exe）的教程。在這個(gè)過(guò)程中，我們使用了 Electron 框架，它使得創(chuàng)建桌面應(yīng)用程序變得更加容易。您現(xiàn)在可以使用您在前端開(kāi)發(fā)中學(xué)到的相關(guān)技能（JavaScript、HTML 和 CSS 等）來(lái)創(chuàng)建精美的桌面應(yīng)用程序。
