基于Node.js的开源架构Electron赋能前端开发

2023-10-30邓杰海汤小燕

现代计算机 2023年16期

邓杰海，刘薇，汤小燕

（江西中医药高等专科学校教育技术中心，抚州 344000）

0 引言

软件开发可分为基于浏览器的前端Web 开发和可以直接访问本地软硬件资源的后端开发。前端开发的软件架构比较丰富，有如jQuery、vue、react和angular等应用非常广泛的架构，通过HTML、CSS、JavaScript 完成前端软件开发。基于浏览器的前端Web 开发受浏览器沙箱操作的限制，前端程序访问本地资源受到很大的约束，而在网上流动的满足各行业的业务规则的数据，最终需要通过后台服务端程序将数据持久化到本地硬盘上，可以说前端应用与后端应用相辅相成、缺一不可。

常用的后端跨平台桌面应用开发的框架有Mono、QT 等，要求具有C、C++、C#编程经验。长期从事Web 前端开发的软件从业人员，要从事后端桌面应用开发，面对这些与前端JavaScript 语言完全不同特性的语言，需要学习面向对象编程和泛型编程，这对前端开发人员来说，有一定难度。然而，在基于JavaScript 引擎V8 的Node.js 横空出世之后，使得精通HTML、CSS和JavaScript语言的前端工程师，可以使用整合了Node.js 和WebKit 技术的Electron架构，在后端桌面服务端程序开发中大放异彩。

1 JavaScript语言运行环境Node.js

Node.js 是Javascript 的一个服务器端运行环境，它使得Javascript 可以脱离浏览器的束缚而运行在服务器环境下，可以像PHP、Python 等语言一样进行服务器端程序的开发［1-2］，它是一个为实时Web（Real-time Web）应用开发而诞生的平台，它从诞生之初就充分考虑了在实时响应、超大规模数据要求下的架构的可扩展性［3］，这使得它摒弃了传统平台依靠多线程来实现高并发的设计思路，而采用了单线程、异步I/O、事件驱动式的程序设计模型［4］。

Node.js与Chrome 浏览器相比，除了HTML、WebKit 和显卡这些UI 相关技术没有支持外，其他功能与Chrome 浏览器十分相似［5］，它们的组成结构如图1所示。

图1 Chrome与Node.js结构图

从图1 可看出，Node.js 开发人员抽象出了Libuv层，使得Node.js的异步非阻塞模型可以兼容Windows 和基于POSIX 的操作系统等平台。在Windows 操作系统平台下，采用IOCP 机制实现，基于POSIX 的操作系统平台下，则对Libev和Libeio库进行抽象封装来实现事件驱动和异步I/O［6］。由于 Node.js 平台抽象了中间层（libuv），使得Node.js实现跨平台成为可能。

在 windows10 操作系统 64 位 CPU 架构安装Node.js v13.14.0软件过程如下：

（1）创建d: odejs目录；

（2）在 d: odejs 目录下创建 node_global 和node_cache子目录；

（3）打开https://nodejs.org/dist/v14.16.1/网页，选择node-v14.16.1-x64.msi 下载并安装至d: odejs目录下；

（4）设置npm config setprefix“d: odejs ode_global”和 npm config set cache“d: odejsnode_cache”；

（5）查看设置npm config get cache、npm config get prefix；

（6）在系统环境变量添加NODE_PATH，输入路径为：D: odejs ode_global（重启）；

（7）设置 npm 镜像源 npm install-g cnpm--registry=https://registry.npm.taobao.org、npm config set registry https://registry.npm.taobao.orgglobal、npm config set disturl https://npm.taobao.org/dist-global；

（8）添加系统变量path的内容（重启），因为cnpm 会被安装到D: odejs ode_global 下，而系统变量path并未包含该路径。

（9）在 cmd 命令状态输入 node-v、npm-v、cnpm-v，如果都能正常显示版本，则表示安装成功。

2 跨平台桌面应用开发架构Electron

Electron 是一个使用 JavaScript、HTML 和CSS 构建桌面应用程序的框架。嵌入Chromium和Node.js 到二进制的Electron 允许操作者保持一个JavaScript 代码并创建在Windows、macOS和Linux 等平台上运行的跨平台应用——不需要本地开发经验［7］。

在Electron 开发架构，有主进程和渲染进程的概念。主进程执行的文件就是模块描述文件package.json 中main 数据项指定的文件，也是开发的桌面应用程序的入口文件，它负责建渲染进程、管理应用程序的生命周期、处理本地文件系统和网络请求等任务。在Electron 应用程序中，主进程由一个Node.js 模块组成，可以通过它来访问底层操作系统的API 和功能。主进程还可以通过进程间通信（IPC）机制与渲染进程通信，实现双方之间的数据传输和消息交互。每一个Web 网页对应一个渲染进程，各个渲染进程之间是相互独立的，都是由主进程创建。主程序与渲染进程之间、渲染进程之间可以直接或间接通过消息发送或共享存储区等方法进行数据交互。

进行Electron 跨平台桌面应用程序开发，可以使用Visual Studio Code、Sublime Text 或Atom等编辑器，它们都是最常用和流行的跨平台代码编辑器，都支持Electron 开发。选择好代码编辑器，就开始安装Electron 跨平台桌面应用程序开发架构，可以使用Node.js 带的包管理器npm 进行安装，如果安装下载速度较慢，可以设置淘宝镜像使用cnpm 进行安装。如果要在电脑上安装多个版本的Electron，则不需要全局安装，本文只介绍在Windows 平台下使用npm 进行全局安装Electron。在Windows 平台下使用cmd 命令打开一个命令输入窗口，在窗口中输入npm install-g electron 命令进行全局安装，安装完成之后输入electron-v 命令，如果能正常显示版本，则表示安装成功。