Electron 是一个使用 JavaScript, HTML 和 CSS 构建跨平台桌面应用程序的开源框架。尽管 Electron 使我们能够在各种操作系统上开发并发布应用程序，但每个操作系统都需要不同的打包方式。在本文中，我将向您展示如何在 Linux 上打包 Electron 应用程序为 Windows 平台的 `.exe` 文件。我们会使用名为 `electron-builder` 的 npm 工具。
### 准备工作
1. 首先，确保您已经在 Linux 系统上安装了最新版本的 Node.js 和 NPM。
2. 其次，创建一个文件夹并初始化项目：
```
mkdir electron-app
cd electron-app
npm init
```
3. 安装 Electron 和 electron-builder 依赖项：
```
npm install electron electron-builder --save-dev
```
### 开发应用程序
在这个示例中，我们将创建一个非常简单的 Electron 应用程序。
1. 创建主入口文件 `index.js`：
```javascript
const { app, BrowserWindow } = require('electron');
function createWindow() {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
});
mainWindow.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();
}
});
```
2. 创建 `index.html` 文件：
```html
```
### 配置 electron-builder
1. 在项目的根目录创建一个名为 `electron-builder.yml` 的文件。我们将在此文件中定义打包配置。
2. 添加以下配置：
```yaml
appId: com.example.yourappname
productName: YourAppName
directories:
output: dist
buildResources: assets
files:
- "**/*"
- "!**/node_modules/*/{CHANGELOG.md,README.md,README,readme.md,readme}"
- "!**/node_modules/*/{test,__tests__,tests,powered-test,test,example,examples}"
- "!**/*.{iml,o,hprof,orig,pyc,pyo,rbc,swp,csproj,sln,xproj}"
- "!.editorconfig"
- "!**/._*"
- "!**/{.git,.hg,.svn,CVS,RCS,SCCS,__pycache__,thumbs.db,.gitignore,.gitattributes}"
- "!**/{.gitmodules,.gitattributes,.editorconfig,.flowconfig,.yarn-metadata.json}"
- "!**/{.idea,.vs,.circleci,.travis.yml,.travis,appveyor.yml,codecov.yml}"
- "!**/{doc,docs}/{!README.md,!readme.md,!README*}"
win:
icon: assets/icon.ico
target:
- nsis
nsis:
oneClick: false
perMachine: true
allowToChangeInstallationDirectory: true
```
请注意，您需要修改 `appId` 和 `productName` 以匹配您的项目。另外，您可以根据需要调整其他配置。
3. 在 `package.json` 文件中，添加脚本以执行 Electron 构建：
```json
"scripts": {
"start": "electron .",
"build": "electron-builder"
}
```
### 准备应用程序资源（可选）
如果您的应用程序需要一个应用程序图标，那么需要添加一个 `.ico` 图标文件，并在 `electron-builder.yml` 文件中更改相应的路径。
### 打包 Electron 应用程序为 `.exe` 文件
现在我们已经完成了应用程序开发和配置，可以开始在 Linux 上打包 Electron 应用程序为 Windows 平台的 `.exe` 文件。
1. 在项目根目录下的终端中执行以下命令：
```
npm run build -- --windows
```
2. 构建完成后，您将在项目的 `dist` 文件夹（或在 `electron-builder.yml` 文件中定义的任何其他输出目录）中找到 `.exe` 文件。
### 注意事项
`electron-builder` 内部利用了 [Wine](https://www.winehq.org/) 实现在 Linux 系统上构建 Windows 平台的应用。您需要确保已在系统上安装并正确配置了 Wine。如果没有，您可能会在打包时遇到问题。请参阅您所使用的 Linux 发行版的文档，以获取有关安装和配置 Wine 的详细信息。
现在您已经知道如何在 Linux 上为 Electron 应用程序创建一个 Windows 平台的 `.exe` 文件。希望本教程对您有所帮助！
