Electron学习笔记

Node
字数统计: 6.9k   |   阅读时长≈ 28 分钟

Electron 简介

Electron（官网：https://www.electronjs.org/zh/）是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源框架。

官网消息2023.8

22.x.y 持续支持​

正如再见 Windows 7/8/8.1 所述，Electron 22（Chromium 108）的计划寿命终止日期将从 2023 年 5 月 30 日延长至 2023 年 10 月 10 日。 Electron 团队将会继续向 Electron 22 提供本计划中的任何安全修复，直到 2023 年 10 月 10 日。 十月 支持日期遵循 Chromium 和 Microsoft 的延长支持日期。 10 月 11 日，Electron 团队将支持回退到最新的三个稳定主要版本，将不再支持 Windows 7/8/8.1。

E25（23 年 5 月） E26（23 年 8月） E27（23 年 10 月）
25.x.y 26.x.y 27.x.y
24.x.y 25.x.y 26.x.y
23.x.y 24.x.y 25.x.y
22.x.y 22.x.y –

时间表

Electron Alpha Beta Stable EOL Chrome Node Supported
26.0.0 2023-Jun-01 2023-Jun-27 2023-Aug-15 TBD M116 TBD √
25.0.0 2023-Apr-10 2023-May-02 2023-May-30 2024-Jan-02 M114 v18.15 √
24.0.0 2022-Feb-09 2023-Mar-07 2023-Apr-04 2023-Oct-10 M112 v18.14 √

摘自：Electron 25.0.0

Electron 特点

Electron提供了易用的标记语法解析、绑定支持、灵活的布局排版、图形能力、数据处理、模板支持以及图形处理管线和插件拓展等功能。

  1. 易用性和标记语法解析：Electron使用HTML和类似于HTML的标记语法，让你可以轻松创建用户界面。它与Web技术紧密集成，你可以使用熟悉的标记语法来构建界面和布局。

  2. 支持绑定和组件：Electron可以使用JavaScript框架（如Vue.js、React等）来实现绑定和组件化开发。你可以使用这些框架实现数据绑定和构建可复用的组件，类似于Vue或React。

  3. 布局排版和插件拓展：Electron提供了灵活的CSS布局排版，你可以使用CSS进行多种布局。此外，Electron还允许你通过插件系统来进行布局的拓展，使你能够自定义和扩展布局功能。

  4. 图形能力和后处理管线：Electron支持强大的图形能力，你可以使用Canvas API或WebGL来实现延迟渲染和后处理管线（例如使用着色器）。这使得你可以处理复杂的图形渲染和效果。

  5. 数据处理和模板：通过JavaScript框架，你可以实现数据处理、触发器和数据前后期处理。此外，你可以使用JavaScript的动态特性来实现动态模板，根据设备数据的变化选择不同的模板。

  6. 图形处理管线和图形插件：Electron允许你使用图形处理管线和图形插件来增强渲染器的图形功能。你可以使用现有的图形库或编写自定义的图形插件来满足你的需求。

如何学习 Electron

  1. Electron官方网站：Electron的官方网站是一个重要的学习资源，提供了全面的文档、API参考和示例代码。你可以在官方网站上找到最新的Electron版本、教程和社区资源。访问Electron的官方网站：https://www.electronjs.org/ ↗

  2. Electron文档：Electron官方提供了详细的文档，涵盖了Electron的核心概念、API参考、应用程序架构和开发流程等内容。你可以在文档中找到关于窗口管理、文件系统访问、进程间通信等方面的信息。访问Electron的文档：https://www.electronjs.org/docs ↗

  3. Electron API演示应用程序：Electron官方提供了一个API演示应用程序，其中包含了许多示例代码，涵盖了Electron的各种功能和用法。你可以通过浏览这些示例代码来学习Electron的具体用法和最佳实践。访问API演示应用程序：https://github.com/electron/electron-api-demos ↗

  4. Electron Fiddle：Electron Fiddle是一个交互式的学习工具，它允许你在浏览器中编写和运行Electron代码片段。你可以使用Electron Fiddle来实验和学习Electron的各种功能和API。访问Electron Fiddle：https://www.electronjs.org/fiddle ↗

  5. Electron社区资源：Electron拥有活跃的开发者社区，你可以通过访问Electron的论坛、GitHub存储库、Stack Overflow和其他开发者社区来获取帮助、参与讨论和分享经验。在Electron的官方网站上可以找到相关链接和资源。

安装 Electron (国内)

安装 Node.js：

首先，确保你的电脑上已经安装了 Node.js。你可以从 Node.js 官方网站（https://nodejs.org ↗）下载安装程序，并按照安装向导进行安装。

查看node和npm版本

安装完成后，你可以在命令提示符或 PowerShell 中验证 Node.js 是否安装成功，通过运行以下命令：

1
node -v

如果成功显示 Node.js 的版本号，则表示安装成功。

catnodeversion

创建Electron 项目

在任意位置创建一个新的文件夹作为你的 Electron 项目目录。

createhelloworld

进入项目目录：

在命令提示符或 PowerShell 中，使用 cd 命令进入你的 Electron 项目目录。
例如，如果你的项目目录在桌面上的一个名为 HelloWorld 的文件夹中，你可以运行以下命令进入该目录：

1
2
:D
cd D:\electorn\HelloWorld

更换npm国内源

若原本的npm下载失败，尝试更换国内源

1
npm install -g cnpm --registry=https://registry.npm.taobao.org

（或）

1
npm config set registry https://registry.npm.taobao.org

使用 npm 进行全局安装

在终端中运行以下命令来安装 Electron 作为项目的依赖项：
这将在项目目录中安装最新版本的 Electron。

1
npm install electron -g

非全局安装：

1
npm install electron

这将下载并安装 Electron 及其相关依赖项。安装完成后，你的项目目录中将出现一个名为 node_modules 的文件夹，其中包含了 Electron 及其依赖项的文件。

检测是否安装成功

安装好后，我们可以通过 -v 命令检测 electron 是否安装成功，命令如下所示：

1
electron -v

显示版本即为安装成功

electronversion

其他命令：查看可提供的版本

1
npm view electron versions

初始化 npm

在项目目录中运行以下命令，初始化 npm 项目，并按照提示填写项目相关信息：

1
npm init

这将生成一个 package.json 文件，其中包含了你的项目的配置信息。

npminitelectron

创建入口main.js文件

在项目目录中创建一个新的 JavaScript 文件，例如 main.js，作为 Electron 应用程序的入口文件。
在 main.js 文件中编写你的 Electron 应用程序的代码。

1
2
3
4
5
6
7
8
9
10
11
12
const { app, BrowserWindow } = require('electron');
function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    });
    win.loadFile('index.html');
}
app.whenReady().then(createWindow);

这段代码创建了一个 Electron 窗口，并加载了一个名为 index.html 的文件。

创建html文件

在项目目录中创建一个新的 HTML 文件，例如 index.html。
打开 index.html 文件，并将以下代码粘贴到文件中：

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
   <head>
     <meta charset="UTF-8">
     <title>Hello World</title>
   </head>
   <body>
     <h1>Hello World!</h1>
   </body>
</html>

这是一个简单的 HTML 文件，其中包含一个标题为 “Hello World!” 的 <h1> 元素。

运行 Electron 应用程序

在项目目录中执行以下命令来启动 Electron 应用程序：

1
npx electron .

这将在 Electron 中打开一个窗口，并加载 index.html 文件。你应该能够看到一个包含 “Hello World!” 的窗口。

恭喜！你已经成功创建并运行了一个简单的 Electron HelloWorld 程序。
你可以根据需要修改 index.html 文件来实现更复杂的界面和功能。

successhelloworld

“Hello World” 文件结构

“Hello World” Electron 应用程序的文件结构通常如下所示：

1
2
3
4
my-electron-app/
├── index.html
├── main.js
├── package.json

electronmainjs

每个文件的作用：

  1. index.html: 这是应用程序的主要 HTML 文件，用于定义应用程序的用户界面。你可以在其中添加 HTML、CSS 和 JavaScript 代码来创建你想要的界面和功能。

  2. main.js: 这是 Electron 应用程序的主要启动文件。它包含了创建 Electron 窗口、加载 index.html 文件等核心功能代码。

  3. package.json: 这是应用程序的配置文件，其中包含了应用程序的元数据、依赖项和脚本等信息。通过运行 npm init 命令可以生成这个文件，并在其中添加你的应用程序的相关信息。

这是一个最简单的 Electron 应用程序的文件结构，它包含一个 HTML 文件和一个 JavaScript 文件。

你可以根据需要对文件结构进行扩展和修改，例如添加其他的 HTML、CSS 和 JavaScript 文件，或者将资源文件（如图像、样式表等）放在适当的位置。

查看 Electron 版本号

如果您的Electron应用程序已打包成可执行文件，则可以通过在命令行或PowerShell窗口中运行该文件，并添加–version参数来获取Electron的版本号。
例如：

1
my-electron-app.exe --version

这将输出您的Electron应用程序所使用的Electron版本号。

升级 Electron 版本

要升级Electron的版本，请按照以下步骤操作：

  1. 打开您的Electron应用程序的根目录并备份您的代码和配置文件。

  2. 在package.json文件中将Electron的版本号更新为您想要升级到的版本号，例如：

1
2
3
"dependencies": {
	"electron": "^26.0.0"
}
  1. 在命令行中运行以下命令，以安装新版本的Electron：
1
npm install

这将会安装package.json文件中指定的所有依赖项，包括新版本的Electron。

  1. 更新您的Electron应用程序的代码和配置文件，以适应新版本的Electron。在新版本的Electron中可能会有一些API更改或功能更新，因此您可能需要相应地更改您的应用程序代码和配置文件。

  2. 测试您的应用程序，确保它在新版本的Electron中正常运行。

请注意，升级Electron版本可能会导致应用程序出现不兼容或错误。因此，在升级之前，请确保备份您的代码和配置文件，并在测试之前进行更改。

清除 npm 缓存

验证代理设置

如果你在代理后面，请确保代理设置正确。
你可以使用npm config命令检查和更新代理设置。在终端中运行以下命令：

1
2
npm config get proxy
npm config get https-proxy

如果这些命令返回一个值，表示已配置代理。
如果返回null，表示未设置代理

删除代理缓存

如果代理设置不正确或者你不需要代理，可以使用以下命令删除它们：

1
2
npm config delete proxy
npm config delete https-proxy

临时禁用代理：

如果你正在使用代理，并怀疑它导致了问题，可以尝试临时禁用它，以查看npm能否正常连接注册表。

使用不同的注册表

默认情况下，npm使用官方注册表（registry.npmjs.org）。
尝试切换到其他注册表，看看是否可以解决问题。
运行以下命令更改注册表：

1
npm config set registry https://registry.npmjs.org/

更改注册表后，再次尝试运行npm命令。

清除npm缓存

有时，npm缓存的问题可能导致连接问题。
你可以尝试通过运行以下命令来清除npm缓存：

1
npm cache clean --force

清除缓存后，再次尝试运行npm命令。

卸载 Electron

要卸载 Electron，你可以按照以下步骤进行操作：

全局卸载

  1. 如果你在全局范围内安装了 Electron，请使用以下命令将其卸载：

使用 npm：

1
npm uninstall -g electron

如果你没有在全局范围内安装 Electron，则可以跳过此步骤。

本地卸载

  1. 如果你在你的项目目录中使用了本地安装的 Electron，请在项目目录下执行以下命令卸载 Electron：

使用 npm：

1
npm uninstall electron

这将从你的项目的 node_modules 目录中移除 Electron。

请注意，以上命令将仅移除 Electron 包本身，而不会删除你的应用程序代码和其他依赖项。

如果你想完全删除 Electron 相关的文件，你可以手动删除以下文件和目录：

  • 从全局范围内安装的情况下，删除对应的 Electron 可执行文件的路径（例如 Windows 中的 C:\Users\your-username\AppData\Roaming\npm\node_modules\electron）。

  • 从项目目录中删除 node_modules 目录中的 Electron 相关文件。

  • 如果你使用了其他构建工具或打包工具（如 webpack、Parcel 或 Electron Builder），请根据相应工具的文档，删除和清理相关的配置文件和构建输出目录。

通过执行上述步骤，你将能够卸载 Electron。

报错信息及解决方式

【查看版本时报错】’electron’ 不是内部或外部命令，也不是可运行的程序或批处理文件。

‘electron’ 不是内部或外部命令，也不是可运行的程序或批处理文件。

使用 electron -v 查看版本时显示：

errorelectronversion

这个错误表明你尝试在命令行中执行 electron 命令时，系统无法找到 electron 命令。

这通常是由于 Electron 没有正确安装或没有在全局范围内配置导致的。

  1. 安装 Electron：首先确保你已经在你的项目目录中通过 npm 或 yarn 安装了 Electron。在命令行中进入你的项目目录，并运行以下命令来安装 Electron：
1
npm install electron
  1. 检查全局安装：如果你希望在命令行中直接运行 electron 命令，你需要全局安装 Electron。使用以下命令来全局安装 Electron：
1
npm install -g electron

请注意，全局安装可能需要管理员权限。

  1. 检查环境变量：如果你已经正确安装了 Electron，但仍然无法在命令行中执行 electron 命令，可能是因为系统的环境变量配置不正确。确保你的系统环境变量中包含 Electron 的可执行文件的路径。

对于 Windows 用户，你可以检查以下路径是否在系统的 PATH 环境变量中：

1
C:\Users\your-username\AppData\Roaming\npm\node_modules\electron\dist

如果路径不在 PATH 环境变量中，可以手动将它添加进去。

  1. 使用 npx 运行：如果你只是想在命令行中临时运行 Electron，而不进行全局安装，你可以使用 npx 命令来执行 Electron。在命令行中进入你的项目目录，并执行以下命令：
1
npx electron

这将临时下载并运行最新版本的 Electron。

【安装时报错】npm ERR! RequestError: connect ETIMEDOUT 20.205.243.166:443

1
2
3
4
5
npm ERR! code 1
npm ERR! path D:\Electron\test1\node_modules\electron
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node install.js
npm ERR! RequestError: connect ETIMEDOUT 20.205.243.166:443

这个错误表明在尝试安装 Electron 时，npm 遇到了连接超时的问题。

解决此问题的一种常见方法是切换 npm 的下载源。默认情况下，npm 使用的是官方的 npm registry，但有时该源可能遇到连接问题。

你可以尝试将 npm 源切换为国内的源，例如淘宝的 npm 镜像。请按照以下步骤进行操作：

  1. 打开命令行工具，并进入到你的 Electron 项目目录下。

  2. 运行以下命令，将 npm 源切换为淘宝的 npm 镜像：

1
npm config set registry https://registry.npm.taobao.org

这将把 npm 源设置为淘宝的源。

  1. 然后，再次运行 npm install 命令来安装 Electron：
1
npm install

这将使用淘宝的 npm 镜像来下载 Electron，以避免连接问题。

请注意，切换源可能会导致下载速度变慢，但能够解决连接超时的问题。如果仍然遇到问题，请确保你的网络连接正常，并检查防火墙或代理设置是否会阻止 npm 的网络访问。

【安装时报错】npm ERR! RequestError: read ECONNRESET

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
npm ERR! code 1
npm ERR! path C:\Users\15234\AppData\Roaming\npm\node_modules\electron
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node install.js
npm ERR! RequestError: read ECONNRESET
npm ERR!     at ClientRequest.<anonymous> (C:\Users\15234\AppData\Roaming\npm\node_modules\electron\node_modules\got\source\request-as-event-emitter.js:178:14)
npm ERR!     at Object.onceWrapper (node:events:628:26)
npm ERR!     at ClientRequest.emit (node:events:525:35)
npm ERR!     at origin.emit (C:\Users\15234\AppData\Roaming\npm\node_modules\electron\node_modules\@szmarczak\http-timer\source\index.js:37:11)
npm ERR!     at TLSSocket.socketErrorListener (node:_http_client:502:9)
npm ERR!     at TLSSocket.emit (node:events:513:28)
npm ERR!     at emitErrorNT (node:internal/streams/destroy:151:8)
npm ERR!     at emitErrorCloseNT (node:internal/streams/destroy:116:3)
npm ERR!     at process.processTicksAndRejections (node:internal/process/task_queues:82:21)

npm ERR! A complete log of this run can be found in: C:\Users\15234\AppData\Local\npm-cache\_logs\2023-08-03T15_13_34_305Z-debug-0.log

这个错误消息表明在尝试安装Electron时，npm遇到了连接错误。具体来说，它显示了“RequestError: read ECONNRESET”错误，这意味着npm无法从服务器读取数据。

以下是一些可能的解决方案：

  1. 检查您的网络连接是否正常。尝试访问其他网站来确保您的网络连接正常。

  2. 尝试清除npm缓存，并重新运行npm install命令：

1
2
npm cache clean --force
npm install
  1. 如果您使用的是代理，请确保npm已正确配置以使用代理服务器。您可以使用以下命令来设置代理：
1
2
npm config set proxy http://proxy.company.com:8080
npm config set https-proxy http://proxy.company.com:8080

请将“proxy.company.com”替换为您的代理服务器地址和端口号。

  1. 如果您使用的是较旧版本的npm，请尝试升级npm版本并重新运行npm install命令。您可以使用以下命令来升级npm版本：
1
npm install -g npm@latest

这将会安装最新版本的npm。然后，您可以再次尝试运行npm install命令，查看是否已经解决了该问题。

请注意，如果您在尝试解决这个问题时对npm进行了更改，请注意备份您的代码和配置文件，并在测试之前仔细检查它们。

【安装时报错】npm ERR! path D:\electron/package.json

1
2
3
4
5
6
7
8
9
10
11
D:\electron>npm install
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path D:\electron/package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'D:\electron\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in: C:\Users\15234\AppData\Local\npm-cache\_logs\2023-08-03T11_58_08_529Z-debug-0.log

这个错误消息表明在D:\electron目录中找不到package.json文件，因此npm无法运行npm install命令。

请确保您在D:\electron目录中已经创建了一个package.json文件，并指定了您的Electron应用程序的名称、版本、依赖项等信息。如果没有创建该文件，请使用以下命令来创建它：

1
npm init

该命令将会引导您创建一个新的package.json文件，并询问您的应用程序的名称、版本、作者、许可证等信息。完成后，您可以在D:\electron目录下找到生成的package.json文件。

如果您已经创建了package.json文件，请确保文件名和路径名称是正确的，并且该文件位于D:\electron目录下。如果它不在该目录中，请将其移动到该目录下。

如果问题仍然存在，请尝试运行以下命令来清除npm的缓存，并重新运行npm install命令：

1
npm cache clean --force

然后再次尝试运行npm install命令。

请确保您在运行npm install命令之前已经在D:\electron文件夹中创建了一个package.json文件。您可以在该文件中指定您的应用程序的名称、版本、依赖项等信息。

如果您已经创建了package.json文件，那么可能是文件名或路径不正确。请检查文件名和路径是否正确，并确保您正在运行npm install命令的文件夹路径与package.json文件所在的路径相同。

此外，如果您使用的是较旧的npm版本，请尝试升级npm版本，并再次运行npm install命令。您可以使用以下命令来升级npm版本：

1
npm install -g npm@latest

这将会安装最新版本的npm。然后，您可以再次尝试运行npm install命令，查看是否已经解决了该问题。

【安装时报错】npm WARN cleanup Failed to remove some directories

1
2
3
4
5
6
7
8
9
10
11
npm WARN cleanup Failed to remove some directories [
npm WARN cleanup   [
npm WARN cleanup     'D:\\Electron\\test1\\node_modules\\extract-zip',
npm WARN cleanup     [Error: EPERM: operation not permitted, rmdir 'D:\Electron\test1\node_modules\extract-zip\node_modules'] {
npm WARN cleanup       errno: -4048,
npm WARN cleanup       code: 'EPERM',
npm WARN cleanup       syscall: 'rmdir',
npm WARN cleanup       path: 'D:\\Electron\\test1\\node_modules\\extract-zip\\node_modules'
npm WARN cleanup     }
npm WARN cleanup   ]
npm WARN cleanup ]

在尝试安装 Electron 时，npm 遇到了：

npm WARN cleanup：在清理过程中无法删除某些目录。具体是 D:\Electron\test1\node_modules\extract-zip\node_modules 目录无法被删除，导致了警告。这可能是由于权限不足或其他操作系统相关的问题导致的。

  1. 权限问题：确保你有足够的权限来删除目录。你可以尝试在命令行中以管理员权限运行安装命令，或者手动删除 D:\Electron\test1\node_modules\extract-zip\node_modules 目录。

【运行时报错】npm ERR! Missing script: “start”

1
2
3
4
5
6
7
8
9
10
11
npm ERR! Missing script: "start"
npm ERR!
npm ERR! Did you mean one of these?
npm ERR!     npm star # Mark your favorite packages
npm ERR!     npm stars # View packages marked as favorites
npm ERR!
npm ERR! To see a list of scripts, run:
npm ERR!   npm run

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\15234\AppData\Local\npm-cache\_logs\2023-08-03T08_07_03_419Z-debug-0.log

缺少脚本：“start”
错误信息提示缺少名为 “start” 的脚本，同时给出了一些可能的替代命令。

  1. 确认你在正确的目录中运行 npm 命令。你应该在包含 package.json 文件的应用程序根目录下运行 npm 命令。

  2. 检查你的 package.json 文件，确保其中包含了一个名为 “start” 的脚本。 "scripts" 部分应该包含 "start" 字段，并且对应的值应该是你启动应用程序的命令。

示例 package.json 文件中的 "scripts" 部分：

1
2
3
"scripts": {
	"start": "electron ."
}

如果你的 package.json 文件中没有 “start” 脚本，你可以根据你的需求添加它。

electronpackagejson

如图，启动应用程序的命令为：

1
npx electron .

【运行时报错】Unable to find Electron app at D:\Electron

1
2
3
4
5
Error launching app
Unable to find Electron app at D:\Electron
Cannot find module 'D:\Electron'
Require stack:
C:\Users\15234VAppData\LocalNnpm-cachel_npx\1323dbbc85759269\node... main.js

errorlauchingapp

根据提供的错误信息，出现了一个与 Electron 应用程序启动相关的错误。错误信息显示了以下内容：

1
2
3
4
5
Error launching app
Unable to find Electron app at D:\Electron
Cannot find module 'D:\Electron'
Require stack:
C:\Users\15234VAppData\LocalNnpm-cachel_npx\1323dbbc85759269\node... main.js

这个错误表明 Electron 无法找到位于 D:\Electron 目录下的应用程序，并且在 D:\Electron 目录中找不到名为 D:\Electron 的模块。

请注意，根据提供的错误信息，似乎存在一个路径错误。错误信息中的路径为 D:\Electron，它被认为是一个模块路径，而不是一个应用程序路径。

请按照以下步骤检查和解决这个问题：

  1. 检查应用程序路径：确认应用程序所在的路径是否正确。检查路径中的拼写错误、缺少斜杠等问题。

  2. 检查启动命令：确保你在启动 Electron 应用程序时使用了正确的命令。常见的启动命令是 electron . 或者 electron main.js。确保命令中的路径和文件名与你的项目结构一致。

  3. 确认应用程序目录结构：在应用程序的目录中，确保存在一个有效的 package.json 文件和一个入口文件（通常命名为 main.js 或 index.js）。package.json 文件应包含一个有效的 "main" 入口字段，指向你的应用程序的入口文件。

【运行时报错】Unable to find Electron app at D:\Electron\my-electron-app

1
2
3
Error launching app
Unable to find Electron app at D:\Electron\my-electron-app
Cannot find module 'D:\Electron\my-electron-app\index.js'. Please verify that the package.json has a valid "main" entry

errorlaunchingapp2

错误启动应用程序
无法在 D:\electron\my-electron-app 找到 Electron 应用程序
无法找到模块 ‘D:\electron\my-electron-app\index.js’。请验证 package.json 文件中是否有有效的 “main” 入口

这个错误提示表明在指定的路径 D:\Electron\my-electron-app 下找不到 Electron 应用程序。同时，它还指出需要验证 package.json 文件中是否有有效的 "main" 入口。

请确保以下几点：

  1. 检查指定的路径是否正确，确保你的 Electron 应用程序确实存在于 D:\Electron\my-electron-app 目录中。

  2. 验证 package.json 文件是否存在，并且确保其中包含了有效的 "main" 入口。"main" 入口应该指向 Electron 应用程序的主要启动文件（通常是 index.js 或 main.js）。

  3. 可能是 Electron 版本不匹配。
    最新的 Electron 版本可能已经更新，因此旧版本的 Electron 可能无法正常工作。

为了解决这个问题，你可以尝试更新 Electron 的版本，或者使用一个更稳定的版本。以下是更新 package.json 文件的示例，将 Electron 版本更新为最新版本：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "name": "test1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "electron": "^25.4.0"
  }
}

在这个示例中，我将 Electron 版本更新为 "^25.4.0"，这是一个较新且稳定的版本。请注意，你也可以使用其他版本号，但建议使用较新的稳定版本。

更新 package.json 文件后，运行 npm install 命令来安装最新版本的 Electron：

1
npm install

然后，尝试再次启动 Electron 应用程序：

1
npm start

示例 package.json 文件：

1
2
3
4
5
6
7
8
9
10
11
{
	"name": "my-electron-app",
    "version": "1.0.0",
    "main": "index.js",
    "scripts": {
	    "start": "electron ."
	},
    "dependencies": {
	    "electron": "^25.4.0"
    }
}

请确保 "main" 字段的值正确指向你的应用程序的主要启动文件。

  1. 确保你已经在应用程序的根目录下运行了正确的命令来启动 Electron 应用程序。通常，可以使用如下命令来启动应用程序：
1
electron .

这将在当前目录下查找 package.json 文件，并使用 "main" 字段指定的入口文件来启动 Electron 应用程序。

Hello World示例

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
    "dependencies": {
        "electron": "^25.4.0"
    },
    "name": "helloworld",
    "version": "1.0.0",
    "main": "main.js",
    "devDependencies": {},
    "scripts": {
        "start": "electron ."
    },
    "author": "mor",
    "license": "ISC",
    "description": "^25.4.0"
}

index.html

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

main.js

1
2
3
4
5
6
7
8
9
10
11
12
const { app, BrowserWindow } = require('electron');
function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    });
    win.loadFile('index.html');
}
app.whenReady().then(createWindow);

参考资料

Electron详解（一）：基本介绍
Electron详解（二）：基本使用与项目打包
Electron简介、安装、实践
React使用Electron开发桌面端

  • 版权声明： 本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！

You Found Me.

支付宝
微信