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

liberg

已于 2024-02-04 16:39:18 修改

阅读量1.6k

点赞数 24

分类专栏： Web/H5/小程序文章标签： electron Electron入门 Electron介绍 Electron实战

于 2024-02-04 15:57:45 首次发布

本文系博主原创，转载请注明原文链接：Liberg的CSDN博客

本文链接：https://blog.csdn.net/linysuccess/article/details/136027594

版权

Web/H5/小程序专栏收录该内容

50 篇文章 3 订阅

订阅专栏

文章目录

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.0

C:\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_modules

Packaging 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:31
    throw err
    ^

TypeError: Class extends value undefined is not a constructor or null
    at 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

无奈，遇到版本不兼容了！！

只好先卸载nodejs，删除nodejs/node_modules/npm整个目录，然后重新安装最新版的nodejs。

Electron实战(二)：将Node.js和UI能力（app/BrowserWindow/dialog)等注入html

liberg

关注

24
点赞
踩
25

收藏

觉得还不错? 一键收藏
0
评论
Electron实战(一)：环境搭建/Hello World/打包exe

Electron整合Chromium浏览器（跨平台界面容器）和Node.js（跨平台系统能力），实现了一个使用JavaScript的全栈开发环境，逐渐成为开发跨平台桌面应用程序的有力竞争者。–-save-dev/-d/-D 本地安装，安装版本写入package.json的devDependencies。–-save/-s/-S 本地安装，安装版本写入package.json的dependencies。（g代表global全局安装的意思）安装语句时，会将安装的模块安装到。无奈，遇到版本不兼容了！
复制链接

扫一扫