electron 安装

什么是 Electron

Electron 是一个用 HTML CSS 和 javaScript 开发应用程序的框架，使用 Chromium 作为前端，Node.js 作为后端。

什么是 Chromium，Chromium 是网页渲染引擎，负责解析和显示网页，

什么是 Node.js，我们可以简单的理解为 javascript 是只能运行在浏览器环境下的，而 node.js 使得 javascrit 能够运行在本地环境。与之相反的是 Emscripten，它使得 C++ 能够在浏览器运行。

说到这里，想必大家也都明白了，electron 其实就是一个特殊的浏览器，它只负责加载渲染特定的网页，并且通过 node.js 获得访问系统资源的能力（比如读写本地文件、操作数据库、创建系统托盘、调用硬件接口等）实现了 Web 页面做到和桌面应用一样的事情。

这样一来，Eletron 的缺点也比较明显了，Electron 应用需要加载完整的 Chromium 和 Node.js 环境，导致启动速度较慢，内存和 CPU 占用较高，以及包体积较大等。优点呢，就是生态好，开发成本低。

Node.js 安装

安装

官网下载地址

下载完成后，根据安装向导指示安装即可

这里有个安装工具集的选项，在《Electron 项目开发实战》一书中是推荐勾选的，但是我本地有了 python 3.12 的情况下，它自动又给我安装了 python 3.14，所以担心环境冲突的需要慎重。

包管理工具

Node.js 自带了 npm，不需要额外安装，npm 是一个包管理工具，用来下载 electron 或者其他包的工具。常用的还有 cnpm 和 yarn。

这里我推荐用 cnpm，cnpm 是淘宝的 npm 镜像客户端，解决国内访问 npm 慢的问题，同时 cnpm 的命令和 npm 完全兼容。

yarn 是Facebook 开发的包管理器，速度快（并行下载）有更好的安全性，但是我即使设置了镜像仓库，还是遇到了一下下载问题。所以在本篇文章中，我将以 cnpm 来介绍如何安装 electron。

Electron 安装

cnpm 安装

安装cnpm 并设置镜像，需要注意的是，淘宝镜像地址已经更换了，很多教程由于时间较早，还使用着旧的镜像。

bash 复制代码

npm install -g cnpm --registry=https://registry.npmmirror.com
# cnpm config set registry https://registry.npmmirror.com 也可以通过这句命令设置镜像源

给大家贴下我踩的坑

bash 复制代码

 cnpm config set registry https://registry.npm.taobao.org
 cnpm install electron --save-dev
[npminstall:get:error] GET https://registry.npm.taobao.org/binary-mirror-config/latest Error: certificate has expired after 5 reties, status: -1, headers: {}
[npminstall:get:error] GET https://registry.npm.taobao.org/bug-versions/latest Error: certificate has expired after 5 reties, status: -1, headers: {}
| [0/1] Installing electron@latest
[npminstall:get] retry GET https://registry.npm.taobao.org/electron after 400ms, retry left 1, Er\ [0/1] Installing electron@latest
[npminstall:get:error] GET https://registry.npm.taobao.org/electron Error: certificate has expire× Install fail! Error: certificate has expired
Error: certificate has expired
    at TLSSocket.onConnectSecure (node:_tls_wrap:1631:34)
    at TLSSocket.emit (node:events:508:28)
    at TLSSocket._finishInit (node:_tls_wrap:1077:8)
    at ssl.onhandshakedone (node:_tls_wrap:863:12)

bash 复制代码

cnpm install electron --save-dev
• [0/1] Installing gopd@^1.0.1

(node:13260) [DEP0190] DeprecationWarning: Passing args to a child process with shell option true can lead to security vulnerabilities, as the arguments are not escaped, only concatenated.
/ [0/1] Installing gopd@^1.0.1
[npminstall:runscript:error] electron@latest run postinstall node install.js error: Error: Command failed with exit code 1: node install.js
    at makeError (C:\Users\wangzx\AppData\Roaming\npm\node_modules\cnpm\node_modules\execa\lib\error.js:60:11)
    at handlePromise (C:\Users\wangzx\AppData\Roaming\npm\node_modules\cnpm\node_modules\execa\index.js:118:26)
    at process.processTicksAndRejections (node:internal/process/task_queues:103:5)
    at async exports.runScript (C:\Users\wangzx\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\utils.js:261:12)
    at async runLifecycleScripts (C:\Users\wangzx\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\lifecycle_scripts.js:66:7)
    at async _install (C:\Users\wangzx\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\install_package.js:321:5)
    at async install (C:\Users\wangzx\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\install_package.js:23:12)
    at async _installOne (C:\Users\wangzx\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\local_install.js:215:15)
    at async mapper (C:\Users\wangzx\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\local_install.js:140:5) {
  shortMessage: 'Command failed with exit code 1: node install.js',
  command: 'node install.js',
  escapedCommand: 'node install.js',
  exitCode: 1,
  signal: undefined,
  signalDescription: undefined,
  stdout: undefined,
  stderr: undefined,
  failed: true,
  timedOut: false,
  isCanceled: false,
  killed: false
× Install fail! Error: run postinstall error, please remove node_modules before retry!
Command failed with exit code 1: node install.js
Error: Command failed with exit code 1: node install.js
    at makeError (C:\Users\wangzx\AppData\Roaming\npm\node_modules\cnpm\node_modules\execa\lib\error.js:60:11)
    at handlePromise (C:\Users\wangzx\AppData\Roaming\npm\node_modules\cnpm\node_modules\execa\index.js:118:26)
    at process.processTicksAndRejections (node:internal/process/task_queues:103:5)
    at async exports.runScript (C:\Users\wangzx\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\utils.js:261:12)
    at async runLifecycleScripts (C:\Users\wangzx\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\lifecycle_scripts.js:66:7)
    at async _install (C:\Users\wangzx\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\install_package.js:321:5)
    at async install (C:\Users\wangzx\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\install_package.js:23:12)
    at async _installOne (C:\Users\wangzx\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\local_install.js:215:15)
    at async mapper (C:\Users\wangzx\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\local_install.js:140:5)
npminstall version: 7.12.0
npminstall argv: D:\nodejs\node.exe C:\Users\wangzx\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\bin\install.js --fix-bug-versions --china 
--userconfig=C:\Users\wangzx\.cnpmrc --disturl=https://cdn.npmmirror.com/binaries/node --registry=http://registry.npm.taobao.org electron --save-dev

全局安装和本地安装

bash 复制代码

cnpm install electron --save-dev
# npm install electron --save-dev

这是本地安装，安装在当前项目的 node_modules文件夹，不同项目可以使用不同的 electron 版本，每个项目都需要执行 npm install electron --save-dev

bash 复制代码

cnpm install -g electron

这是全局安装，有点类似于设置了环境变量，每个项目用的都是全局安装的 electron

官方推荐使用本地安装