Electron实战(一)：环境搭建/Hello World/打包exe

文章目录

- - Electron
  - 安装Node.js
  - NodeJs推荐配置
  - 开始Electron项目
  - 创建index.js文件
  - 创建src目录
  - 运行
  - 打包生成exe
  - 生成安装包
  - 踩坑
- 下一篇
- Electron实战(二)：将Node.js和UI能力（app/BrowserWindow/dialog)等注入html

Electron

Electron是一个使用JavaScript, HTML, CSS开发跨平台桌面应用程序的框架。

Electron整合Chromium浏览器（跨平台界面容器）和Node.js（跨平台系统能力），实现了一个使用JavaScript的全栈开发环境，逐渐成为开发跨平台桌面应用程序的有力竞争者。

2023年7月3日，腾讯正式上线 Windows QQ v9.9.0 体验版本。该版本基于 Electron 重构，实现了 Linux、macOS、Windows 三端架构统一。三个平台一套代码，多端运行，同步更新。三个平台的版本在外观、操作和性能上一致。

官方文档：https://www.electronjs.org/docs/latest/

安装Node.js

官网下载安装最新版NodeJs：

https://nodejs.org/en

安装到D:/env/nodejs/目录底下，安装成功后查看版本：

C:\Users\admin>node -v
v20.10.0C:\Users\admin>npm -v
10.2.3

NodeJs推荐配置

配置npm安装的全局模块的位置，以及缓存目录cache的位置。

如果不配置，后续执行npm install xxx -g（g代表global全局安装的意思）安装语句时，会将安装的模块安装到C:\Users\用户名\AppData\Roaming\npm路径中，占用C盘空间。

可以在node安目录（比如D:\env\nodejs），下创建node_global目录和node_cache目录，然后执行命令：

npm config set prefix "D:\env\nodejs\node_global"
npm config set cache "D:\env\nodejs\node_cache"
npm config list #查看配置信息

检查设置是否成功：

C:\Users\admin>npm config get prefix
D:\env\nodejs\node_global
C:\Users\admin>npm config get cache
D:\env\nodejs\node_cache

开始Electron项目

创建项目目录，项目目录底下执行npm init，然后安装Electron。

# 进入新建的项目目录
cd D:\dev\web\work\LuckyTools
# 初始化npm项目
npm init
# 项目底下安装electron
npm install electron -S

package.json中记录了安装electron的版本：

"dependencies": {"electron": "^27.1.3"
}

npm安装命令的常用参数比较：

npm install xxx（简写：npm i xxx）本地安装xxx包，但不将安装包的信息写入package.json（不推荐）
-–global/-g 全局安装，安装后可直接（全局）使用相应包里面提供的命令
–-save/-s/-S 本地安装，安装版本写入package.json的dependencies
–-save-dev/-d/-D 本地安装，安装版本写入package.json的devDependencies

创建index.js文件

项目目录底下创建index.js作为项目的入口文件，文件内容：

//app 模块，控制整个应用程序的生命周期和事件处理
//BrowserWindow 模块，它创建和管理程序的窗口。
const { app, BrowserWindow } = require('electron')
const path = require('path')const iconPath = path.join(__dirname, './src/res/icon.ico')
//在 Electron 中，只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口
app.on('ready', () => {//创建一个窗口const mainWindow = new BrowserWindow({icon: iconPath,});mainWindow.setMenu(null);//禁用默认的菜单栏//窗口加载html文件mainWindow.loadFile('./src/index.html')
})

创建src目录

里面存放前端页面，比如index.html。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><link rel="stylesheet" href="css/xxx.css"/><style></style>
</head>
<body><div>Hello World</div><script src="js/xxx.js"></script><script></script>
</body>
</html>

编辑package.json，scripts属性下，增加start命令：

// package.json
"scripts": {"start": "electron .",
}

运行

npm start

在这里插入图片描述

打包生成exe

安装electron-packager后，可打包生成Windows可执行文件exe。

npm install electron-packager -g

添加打包package命令：

"scripts": {"start": "electron .","package":"electron-packager . needle-server --platform=win32 --arch=x64 --out=./out --asar --app-version=1.0.0 --overwrite --ignore=node_modules"},

执行打包命令：

PS D:\dev\web\work\LuckyTools> npm run package> lucky_tools@1.0.0 package
> electron-packager . needle-server --platform=win32 --arch=x64 --out=./out --asar --app-version=1.0.0 --overwrite --ignore=node_modulesPackaging app for platform win32 x64 using electron v27.1.3
Wrote new app to: out\needle-server-win32-x64

生成安装包

可以使用electron-builder，由于没有实际测试，略过。

npm i electron-builder --D

踩坑

笔者安装的版本：

"devDependencies": {"electron-builder": "^24.9.1","electron-packger": "^24.9.1"}

由于electron-packager依赖较新的node版本。只好重装了node最新版本。但安装后发现npm不能用了，npm -v 报错：

D:\env\nodejs\node_modules\npm\lib\es6\validate-engines.js:31throw err^TypeError: Class extends value undefined is not a constructor or nullat Object.<anonymous> (D:\env\nodejs\node_modules\npm\node_modules\fs-minipass\lib\index.js:136:4)at Module._compile (node:internal/modules/cjs/loader:1376:14)at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)at Module.load (node:internal/modules/cjs/loader:1207:32)at Module._load (node:internal/modules/cjs/loader:1023:12)at Module.require (node:internal/modules/cjs/loader:1235:19)at require (node:internal/modules/helpers:176:18)at Object.<anonymous> (D:\env\nodejs\node_modules\npm\node_modules\cacache\lib\content\read.js:4:13)at Module._compile (node:internal/modules/cjs/loader:1376:14)at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)Node.js v20.10.0