在本教程中，我们将学习如何将前端和后端应用程序合并并打包成一个单独的可执行文件(EXE)。这对于创建独立的桌面应用程序非常有用。我们将分别使用 Electron 作为前端框架和 Node.js 作为后端。
前提条件：
1. 确保已经安装了 Node.js 和 NPM（Node包管理器）。
2. 知识储备：具备一定的HTML、CSS、JavaScript以及Node.js知识。
步骤1：创建并初始化项目
1. 打开终端或命令提示符，输入以下命令创建一个名为`my-app`的目录并进入该目录：
```
mkdir my-app && cd my-app
```
2. 使用以下命令初始化一个新的Node.js项目：
```
npm init -y
```
步骤2：安装依赖项
1. 使用以下命令安装 Electron：
```
npm install electron --save-dev
```
步骤3：创建前端和后端文件
1. 在项目根目录中创建以下文件：
- `index.html`（前端主页面）
- `main.css`（前端样式表）
- `renderer.js`（前端 JavaScript 代码）
- `backend.js`（后端 Node.js 代码）
- `main.js`（Electron 主进程文件）
2. 在`index.html`文件中添加以下内容：
```
```
3. 在`main.css`文件中添加一些样式（可自定义）：
```
body {
font-family: Arial, sans-serif;
}
```
4. 在`renderer.js`文件中编写前端 JavaScript 代码，例如添加一个事件监听器：
```
document.getElementById('btn').addEventListener('click', () => {
alert('Button clicked');
});
```
5. 在`backend.js`文件中编写后端 Node.js 代码，例如创建一个简单的HTTP服务器：
```
const http = require('http');
const server = http.createServer((req, res) => {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello from backend\n');
});
server.listen(3000, () => {
console.log('Server running at http://localhost:3000/');
});
```
6. 在`main.js`文件中编写 Electron 主进程代码，以创建一个Electron窗口并加载前端页面：
```
const {app, BrowserWindow} = require('electron');
const path = require('path');
const url = require('url');
let win;
function createWindow() {
win = new BrowserWindow({width: 800, height: 600});
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}));
win.on('closed', () => {
win = null;
});
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (win === null) {
createWindow();
}
});
```
7. 修改`package.json`文件，将`main`字段的值更改为`"./main.js"`，并在`scripts`字段下添加一个新脚本`"start"`，如下所示：
```
{
"name": "my-app",
"version": "1.0.0",
"description": "",
"main": "./main.js",
"scripts": {
"start": "electron .",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^13.1.9"
}
}
```
步骤4：运行项目
在终端或命令提示符中输入以下命令启动项目：
```
npm start
```
这将打开一个Electron窗口并显示前端内容。后端服务器将在后台运行。
步骤5：将应用程序打包成一个EXE文件
为此，我们需要安装electron-packager：
```
npm install electron-packager --save-dev
```
接着，在`package.json`文件的`scripts`字段下添加一个新脚本`"build"`，如下所示：
```
"scripts": {
"start": "electron .",
"build": "electron-packager . my-app --platform=win32 --arch=x64 --out=dist --overwrite --icon=app.ico",
"test": "echo \"Error: no test specified\" && exit 1"
},
```
运行以下命令将应用程序打包成一个EXE文件：
```
npm run build
```
构建成功后，可以在项目根目录下的`dist`文件夹中找到生成的EXE文件。
现在您已经成功将前端和后端合并并打包成了一个独立的EXE文件！稍微调整即可适应不同的项目需求。
