Electron 安装以及搭建一个工程

原创

已于 2024-09-28 16:24:19 修改 · 1.9k 阅读

30 ·

CC 4.0 BY-SA版权

文章标签：

#electron #javascript #前端

于 2024-09-28 15:52:44 首次发布

安装Node.js

在使用Electron进行开发之前，需要安装 Node.js。官方建议使用最新的LTS版本。
检查 Node.js 是否正确安装：

# 查看node版本
node -v
# 查看npm版本
npm -v

注意
开发者需要在开发环境安装 Node.js 才能编写 Electron 项目，但是 Electron 应用程序不使用系统本地的 Node.js 环境来运行它的代码。
Electron 应用程序使用它内置的 Node.js 运行时。这意味着终端用户不需要安装 Node.js 环境也可以运行Electron 应用程序。

安装Electron

Electron 应用程序遵循与其他 Node.js 项目相同的结构。

首先创建一个文件夹my-electron-app并在vscode 编译器中打开文件夹。

初始化 npm 包：

npm init

init 初始化命令会提示开发者在项目初始化配置中设置一些值，有几条规则需要遵循：

entry point 应为 main.js。
author 与 description 可为任意值，但对于应用打包是必填项。

生成的 package.json 文件应该像这样：

{
   
   
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "一个测试用的electron项目",
  "main": "main.js",
  "author": "zhangSan", 
  "license": "ISC"
}

在项目中安装electron：

npm install --save-dev electron

# 可以简写
npm i electron -D

注意：electron是开发依赖。

electron依赖非常难下载，总是下载到中途就失败了。

查看官方文档：

在运行 npm install electron 时，有些用户会偶尔遇到安装问题。
在大多数情况下，这些错误都是由网络问题导致，而不是因为 electron npm 包的问题。如 ELIFECYCLE、EAI_AGAIN、ECONNRESET 和 ETIMEDOUT 等错误都是此类网络问题的标志。最佳的解决方法是尝试切换网络，或是稍后再尝试安装。

fine，意思是网络问题咯，千M网下载不下来也是离谱啊…

解决方案

如果通过 npm 安装失败，你也可以尝试通过从 electron/electron/release 直接下载 Electron
如果安装失败并报错EACCESS，可能需要修复npm权限。
如果上述报错持续出现，unsafe-perm 标志可能需要被设置为 true:

npm install electron --unsafe-perm=true

在较慢的网络上, 最好使用 --verbose 标志来显示下载进度:

npm install --verbose electron

如果需要强制重新下载文件, 并且 SHASUM 文件将 force_no_cache 环境变量设置为 true。

我直接使用了第3点和第4点：

npm install electron -D --unsafe-perm=true --verbose

历时半个小时，这个依赖终于下载成功了！感天动地！！

在 package.json 配置文件中的scripts字段下增加一条start命令：

{
   
   
  "scripts": {
   
   
    "start": "electron ."
  }
}

package.json 文件应该像这样：

{
   
   
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "一个测试用的electron项目",
  "main": "main.js",
  "scripts": {
   
   
    "start": "electron ."
  },
  "author": "zhangSan",
  "license": "ISC",
  "devDependencies": {
   
   
    "electron": "^32.