1 、Electron 打包，包括需要下载的内容和环境配置步骤
注意：Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序的框架
首先需要电脑环境有Node.js 和 npm我之前的文章有关nvm下载node的说明也可以去官网下载
检查是否有node和npm环境命令
node -v
npm -v输出版本号，说明安装成功
2、创建 Electron 项目
2.1 创建项目目录
打开命令行工具，创建一个新的项目目录并进入该目录：
mkdir electron-app
cd electron-app2.2 初始化项目
npm init -y2.3 安装 Electron
npm install electron --save-dev2.4 创建项目文件(可在vscode或者hbuilder打开并创建)
在项目根目录下创建 main.js 和 index.html 文件。
main.js 文件内容如下：
const { app, BrowserWindow } = require('electron')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})index.html 文件内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using Node.js <script>document.write(process.versions.node)</script>,
Chromium <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>2.5 配置启动脚本
在 package.json 文件中添加启动脚本：
{
"name": "electron-app",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^23.2.1"
}
}2.6 启动项目
在命令行中执行以下命令启动 Electron 应用：
npm start3. 选择打包工具并安装
常见的 Electron 打包工具有 electron-builder 和 electron-packager，这里以 electron-builder 为例。
3.1 安装 electron-builder
在项目目录下执行以下命令安装 electron-builder：
npm install electron-builder --save-dev4. 配置 electron-builder
在 package.json 文件中添加 build 字段来配置打包选项：
{
"name": "electron-app",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "electron .",
"pack": "electron-builder --dir",
"dist": "electron-builder"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^23.2.1",
"electron-builder": "^23.6.0"
},
"build": {
"appId": "com.example.electron-app",
"productName": "Electron App",
"directories": {
"output": "dist"
},
"win": {
"target": [
"nsis"
]
},
"mac": {
"target": [
"dmg"
]
},
"linux": {
"target": [
"deb"
]
}
}
}上述配置中，appId 是应用的唯一标识符，productName 是应用的名称，directories.output 是打包输出的目录。win、mac 和 linux 分别指定了不同操作系统下的打包目标。
5. 打包应用
5.1 打包测试
执行以下命令进行打包测试，该命令会在 dist 目录下生成一个未压缩的应用包：
npm run pack5.2 正式打包
执行以下命令进行正式打包，会生成不同操作系统下的安装包：
npm run dist打包完成后，在 dist 目录下可以找到生成的安装包。
