Electron实践继续

news2025/1/20 6:27:00

文章目录

前言
- 一、知识储备前提
- 二、开发工具集
- - （一）代码编辑器之选
  - （二）命令行工具运用
  - （三）Git 与 GitHub 协作利器
  - （四）Node.js 与 npm 核心环境
你的第一个Electron应用程序

前言

上回说道，我们按照electron官网的提示，安装了合适版本的nodejs

现在我们继续啊

在这里插入图片描述
上回咱直接去了releases。

后来，我仔细看了看，发现上面最显眼的这个docs，这一次咱点它。

在这里插入图片描述
咱先搞搞这个基本要求：

一、知识储备前提

由于 Electron 是网页应用的原生包装层且在 Node.js 环境中运行，所以开发者应预先具备一定的 Node.js 和前端 Web 开发知识。对于 Node.js 基础概念如模块系统、异步编程等，以及前端开发中的 HTML 结构搭建、CSS 样式设计和 JavaScript 逻辑编写等技能的熟悉程度，将直接影响 Electron 项目的开发进程。若在这些方面有所欠缺，可参考 MDN Web Docs 的 Web 入门教程和 NodeJS 官方入门指南进行系统学习，为后续开发筑牢根基。

二、开发工具集

（一）代码编辑器之选

一款趁手的代码编辑器是编码工作的得力助手。Visual Studio Code 凭借其丰富的插件生态、强大的代码智能提示和便捷的版本控制集成功能，成为 Electron 开发的热门推荐。当然，开发者也可依据个人习惯，从 Sublime Text、Atom 等众多文本编辑器中挑选适合自己的工具，只要能满足高效编写代码的需求即可。

（二）命令行工具运用

在整个 Electron 开发教程中，命令行接口（CLI）的使用贯穿始终。Windows 系统下的命令提示符或 PowerShell、macOS 的 Terminal 以及 Linux 各发行版对应的终端工具（如 GNOME 终端、Konsole 等）都能派上用场。此外，多数现代代码编辑器也内置了终端功能，开发者可灵活选择使用系统默认终端或编辑器内置终端来执行诸如安装依赖、运行脚本等操作，确保开发流程的顺畅进行。

（三）Git 与 GitHub 协作利器

Git 作为广泛应用的版本控制系统，与基于其构建的协作开发平台 GitHub，在 Electron 应用开发中扮演着重要角色。虽然在开发初期并非强制要求，但在后续软件自动更新环节，借助 GitHub Releases 能实现高效的版本管理与分发。因此，开发者应提前创建 GitHub 账号并安装 Git。对于 Git 新手，GitHub 提供的 Git 指南是很好的学习资源，同时 GitHub Desktop 等可视化工具也为不熟悉命令行操作的开发者提供了便利的替代方案。在项目开发过程中，建议创建本地 Git 仓库，在教程各关键步骤完成后及时提交代码，便于版本回溯与团队协作。

（四）Node.js 与 npm 核心环境

开发 Electron 应用的关键在于安装 Node.js 运行环境及其包管理器 npm，推荐安装最新的长期支持（LTS）版本。在安装过程中，务必使用针对所在平台预构建的 Node.js 安装器，以规避与其他开发工具可能产生的兼容性问题。例如在 macOS 系统中，可借助 Homebrew 或 nvm 等包管理器进行安装，有效避免目录权限问题。安装完成后，可通过在命令行输入“node -v”和“npm -v”来检查 Node.js 和 npm 是否成功安装及查看其版本信息。需要特别注意的是，尽管开发环境依赖 Node.js，但 Electron 应用在运行时并不使用系统的 Node.js 环境，而是其内置的 Node.js 运行时，这就确保了终端用户无需安装 Node.js 环境也能正常运行应用。若要查看应用内置的 Node.js 版本，可在主进程或预加载脚本中访问“process.versions”变量，详细信息可参考 https://releases.electronjs.org/releases.json。

在这里插入图片描述
嗯，万事俱备了。（其实就是咱上次装的node）

你的第一个Electron应用程序

在这里插入图片描述

继续按照提示走。

首先就是不让用WSL。

咱本来就是要构建window下的.exe格式的软件嘛，自然不会用到WSL

TIPS: WSL（Windows Subsystem for Linux）是微软推出的一项兼容层功能。它允许用户在Windows操作系统上原生运行Linux二进制可执行文件。从本质上来说，WSL提供了一个Linux环境。用户能够使用常见的Linux命令，如ls、cd、grep等。对于开发者而言，这是一个巨大的便利。开发人员可以在熟悉的Windows系统上，同时拥有Linux开发环境，进行诸如编译Linux软件、运行Linux脚本等操作。并且WSL可以与Windows文件系统交互，方便文件的共享和访问。它分为WSL1和WSL2，WSL2在性能和功能上有进一步的提升。

因为咱是windows，所以也不支持&&

咱一步一步来吧

mkdir my-electron-app
cd my-electron-app
npm init

在这里插入图片描述
安装过conda的，这里估计会一路回车干下去，但这里是不行的。

在这里插入图片描述

错误的示范哈👆

正确的示范，我们需要在出现entry point时，主动输入：
main.js

在这里插入图片描述

就像这样👆

npm install electron --save-dev

在这里插入图片描述
竟然没报错，不错不错

新建一个main.js
里面写上一句：

console.log('Hello from Electron 👋')

修改package.json

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "electron": "^34.0.0"
  }
}