如何在 Ubuntu 22.04 上安装 Electron 框架 | 20.04

作者汲古

Electron，以前称为 Atom Shell，是一个免费的开源软件框架，一直在桌面应用程序开发领域掀起波澜。它是 OpenJS 基金会的心血结晶，OpenJS 基金会是一个致力于支持 JavaScript 生态系统可持续发展的社区。

Electron 是 Web 技术（主要是 HTML、CSS 和 JavaScript）的独特组合，另外还添加了前端框架和 Web Assembly。这就像 Web 开发人员的梦想成真，让他们轻松踏入桌面应用程序开发。

Electron 的神奇之处在于它的渲染过程。它在前端使用一个版本的 Chromium 浏览器引擎，在后端使用 Node.js 运行时环境。这种结合可以将 Web 技术无缝集成到桌面环境中，提供两全其美的优势。

也可以看看:

但这还不是全部。Electron 还利用各种 API 来启用功能，例如与 Node.js 服务的本地集成和进程间通信模块。这就像拥有一把用于桌面应用程序开发的瑞士军刀。

为什么 Ubuntu 用户应该拥抱 Electron？

作为 Ubuntu 用户，您可能想知道，“为什么我应该考虑使用 Electron 而不是其他流行的软件替代品？” 以下是一些令人信服的理由：

  • 跨平台兼容性：电子应用程序是跨平台的。这意味着它们可以在 Ubuntu、Windows 和 macOS 上运行。这就像拥有一种人人都能理解的通用语言。
  • Web 技术：如果您是 Web 开发人员，那么 Electron 就是梦想成真。您可以使用现有的 HTML、CSS 和 JavaScript 知识来创建桌面应用程序。这就像建立一个网站，但适用于桌面。
  • 强大的 API：Electron 提供了强大的 API，允许原生操作系统功能。这意味着您的应用程序可以做的不仅仅是显示 Web 内容。它们可以与操作系统交互，提供更丰富的用户体验。
  • 社区支持：Electron 得到 OpenJS 基金会和充满活力的开发者社区的支持。这意味着您拥有触手可及的丰富资源和支持。

以下指南将演示如何使用 CLI 命令在 Ubuntu 22.04 Jammy Jellyfish 或 Ubuntu 20.04 Focal Fossa 上安装 Electron。

第 1 部分：在 Ubuntu 上设置 Node.js

在我们精通 Electron 的旅程中，第一步涉及设置有助于服务器端 JavaScript 执行的运行时环境。这个环境由Node.js提供，这是使用 Electron 的关键先决条件。通过这一部分，您将得到专业指导，完成 Ubuntu 系统上的 Node.js 安装过程。所有程序都将通过命令行界面 (CLI) 执行，命令行界面是 Linux 系统上命令执行的中心。

第 1 步：刷新您的 Ubuntu 系统

在深入研究安装过程之前，我们必须确保您的 Ubuntu 系统是最新的。使您的系统保持最新状态是一种战略举措，有助于规避因软件包过时而可能出现的潜在冲突。为此，请执行以下命令：

sudo apt update && sudo apt upgrade

该命令充当双重操作员；sudo apt update从 Ubuntu 存储库中检索系统软件包的最新版本，同时sudo apt upgrade应用这些更新，从而有效地将系统升级到这些最新版本。

第 2 步：采购基本包裹

顺利安装 Node.js 需要存在某些包。我们将使用apt包管理器获取它们，这是一个在 Ubuntu 系统上处理包安装的强大工具。随后的命令安装curl（一种通过多种协议传输数据的多功能工具）和git（一个健壮的分布式版本控制系统）：

第 3 步：合并 NodeSource 存储库

对于 Node.js 的实际安装，我们转向 NodeSource 存储库。与默认的 Ubuntu 存储库相比，此存储库维护了更新版本的 Node.js。您可以自由选择 Node.js 的当前稳定版本或最新的长期支持 (LTS) 版本。

稳定版拥有最新的功能，而 LTS 版提供增强的稳定性，使其成为生产环境的首选。根据您的偏好，运行以下命令之一以合并 NodeSource 存储库：

选项 1 – 导入 Node.js – 当前版本：

curl -fsSL https://deb.nodesource.com/setup_current.x | sudo -E bash -

选项 2 – 导入 Node.js – LTS 版本：

curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo bash -

适当的 NodeSource 存储库现在是您系统的一部分，需要进行系统更新才能识别这个新增功能：

sudo apt update

系统更新完成后，可以使用以下命令安装 Node.js：

sudo apt install nodejs

安装后，您应该验证安装的 Node.js 版本以确定安装是否成功。这可以通过执行命令来完成：

node --version

此命令返回系统上当前安装的 Node.js 版本，从而验证安装是否成功完成。

第 2 节：Electron 框架安装

在开始构建我们的 Electron 应用程序之前，我们需要安装 Electron 框架。此过程涉及几个步骤，每个步骤对于确保顺利和成功安装至关重要。

第 1 步：创建一个新目录

我们的第一步是为我们的 Electron 项目创建一个新目录。这是存储与我们项目相关的所有文件的地方。您可以使用mkdir命令后跟目录名称来执行此操作。就是这样：

mkdir electron-app && cd electron-app

此命令创建一个名为的新目录electron-app，然后使用该cd命令导航到该目录。

第 2 步：初始化一个新的 Node.js 应用程序

接下来，我们需要在项目目录中初始化一个新的 Node.js 应用程序。这为我们的 Electron 应用程序设置了必要的 Node.js 环境。遗憾的是，原文并没有给出这一步的命令。这是正确的命令：

npm init -y

此命令使用默认设置初始化新的 Node.js 应用程序。

第 3 步：安装电子

设置好 Node.js 环境后，我们现在可以安装 Electron。为此，我们将使用 npm（节点包管理器），它是 Node.js 平台的包管理器。这是命令：

npm install --save electron

此命令安装 Electron 并将其作为依赖项添加到我们的项目中。

第 3 部分：验证安装

安装 Electron 后，最好验证安装以确保一切设置正确。我们可以通过检查 Electron 的安装版本来做到这一点。就是这样：

./node_modules/.bin/electron --version

此命令应显示已安装的 Electron 版本，确认安装成功。

第 4 部分：创建您的第一个 Electron 应用程序

成功安装 Electron 后，我们就可以开始构建我们的第一个 Electron 应用程序了。我们将指导您完成每个步骤，解释我们正在做什么以及为什么这样做。

第 1 步：创建一个 Index.js 文件

创建 Electron 应用程序的第一步是创建一个index.js文件。该文件将作为我们应用程序的主要进程文件。下面是创建此文件的命令：

nano index.js

此命令创建并打开一个index.js在我们的项目目录中命名的新文件。

第 2 步：编写您的应用程序代码

接下来，我们需要向index.js文件中添加一些代码。此代码将定义我们的 Electron 应用程序的行为。这是代码：

const { app, BrowserWindow } = require('electron')

function createWindow () {
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

index.html此代码创建一个新的浏览器窗口，并在应用程序准备就绪时加载一个命名的 HTML 文件。

第 3 步：创建 HTML 文件

我们的 Electron 应用程序将在我们创建的浏览器窗口中显示一个 HTML 文件。所以，我们的下一步是index.html在我们的项目目录中创建一个文件。下面是创建此文件的命令：

nano index.html

此命令在我们的项目目录中创建一个名为的新文件index.html。

第 4 步：编写 HTML 代码

创建文件后index.html，我们现在可以向其中添加一些 HTML 代码。HTML（超文本标记语言）是用于创建网页的标准标记语言。它描述了网页的结构并告诉浏览器如何显示内容。这是我们应用程序的 HTML 代码：

<!DOCTYPE html>
<html>
  <body>
    <h1>Hello, Electron!</h1>
  </body>
</html>

这段代码创建了一个简单的 HTML 文档，其中只有一个标题为“Hello, Electron! ”。

第 5 步：开始您的申请

index.js设置好和文件后index.html，我们现在可以启动我们的 Electron 应用程序。我们将使用npm start命令执行此操作。但在我们这样做之前，我们需要start向我们的文件添加一个脚本package.json。打开您的package.json文件并start在该部分中添加一个脚本scripts，如下所示：

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

例子：

{
  "name": "electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "electron": "^x.y.z"
  }
}

electron .这告诉 npm在您运行时运行命令npm start。该electron .命令启动您的 Electron 应用程序。

现在，您应该能够使用npm start. 就是这样：

npm start

此命令启动我们的 Electron 应用程序。如果一切设置正确，将打开一个新窗口，显示消息：“Hello, Electron!”。

关于在 Ubuntu Linux 上安装 Electron 的结束思考

在本指南中，我们着手在 Ubuntu Linux 系统上安装和设置 Electron 框架。我们首先为我们的项目创建一个新目录，初始化一个 Node.js 应用程序，然后安装 Electron。然后我们通过检查 Electron 版本来验证我们的安装。奠定了基础后，我们开始创建我们的第一个 Electron 应用程序。我们创建了一个index.js文件，编写了我们的应用程序代码，创建了一个index.html文件，并添加了一些 HTML 代码。最后，我们启动了我们的应用程序，并看到我们的作品栩栩如生。

这个过程虽然简单，但却证明了 Electron 的强大功能和灵活性。它是一个允许我们使用网络技术构建桌面应用程序的框架，弥合了网络和桌面之间的鸿沟。无论您是经验丰富的开发人员还是刚起步的新手，Electron 都提供了一个平台来创建可以在多个操作系统上运行的强大应用程序。

其他资源

为了进一步探索和学习，这里有一些官方资源：

  • Electron 官方文档：这是官方的 Electron 文档。这是一个全面的资源，涵盖了从入门到高级主题的所有内容。对于任何使用 Electron 的人来说，这是必游之地。
  • Electron GitHub 存储库：这是 Electron 的官方 GitHub 存储库。这是探索源代码、为项目做贡献以及了解最新更改和改进的好地方。
  • Node.js 官方文档：由于 Electron 是基于 Node.js 构建的，因此了解 Node.js 非常重要。这是官方的 Node.js 文档，涵盖了您需要了解的有关 Node.js 的所有内容。

类似文章