解决Electron安装报错问题
Electron是一个优秀的跨平台桌面端应用的框架,官网给出的简绍很简单:使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用
。好多朋友也想试试使用前端技术来做一个桌面应用,但是往往在安装的时候就直接报错了,大多数的错误是:
Error: read ECONNRESET
# 或者
Error: Electron failed to install correctly ...
解决办法
解决办法也是简单的,如果你是安装失败了,那么先把node_modules
中的electron
删掉,然后重新开始下面的步骤。
- 设置淘宝镜像源(推荐使用nrm,这一步是为了保证其他依赖不报错) npm install -g nrm nrm use taobao
- 设置环境变量并安装 # Mac系统 ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ npm install # Windows系统 # 全局依赖cross-env为了把参数写入环境变量 当然直接修改环境变量也可以 npm install -g cross-env cross-env ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron npm install 然后稍等片刻就可以了。
深入研究
通过上面的设置基本上就解决了Electron安装的问题,现在我们可以深入一下,看看它是怎么解决的。首先我们进入它的源代码,这个里面有一个npm的文件夹,这个路径下存放的就是npm上的Electron依赖。打开看看你会发现只有几个文件,没错Electron的依赖包就这么点东西。
那么这么点东西怎么做跨平台的应用的呢?首先看一下package.json
文件,为了方便查看,我拷贝过来一份,如下:
{
"main": "index.js",
"types": "electron.d.ts",
"bin": {
"electron": "cli.js"
},
"scripts": {
"postinstall": "node install.js"
},
"dependencies": {
"@electron/get": "^1.0.1",
"@types/node": "^12.0.12",
"extract-zip": "^1.0.3"
},
"engines": {
"node": ">= 8.6"
}
}
内容很少,但有2个部分很重要。一个是script
,可以看到里面有一个postinstall
的钩子命令,这条命令会在下载完依赖以后执行一下,也就说当依赖安装完后会执行node install.js
。另外一个重要的部分就是bin
,它指定了运行全局依赖时的入口文件,也就是cli.js
文件,我们稍后再说这个。
先简单的看一下install.js
,里面最主要的部分是调用了方法downloadArtifact
,用来下载跟平台相关的Electron可执行文件。下载完后调用extractFile
方法,把文件解压了,最后在path.txt
中把执行文件的路径写进去,这个路径下是不同平台下的可执行文件的路径。
最后我们看一下他是从哪里下载的。首先downloadArtifact
方法是在@electron/get依赖里面。我们进入到src/index
中。
此时我们可以看到url是通过getArtifactRemoteURL
方法获取的,然后我们看一下getArtifactRemoteURL
方法,源码在这里。
在getArtifactRemoteURL
方法中,可以看到,基础路径base
是通过mirrorVar
函数返回的,默认情况是没有nightly的,所以默认情况下是下面这个样子的:
process.env[`NPM_CONFIG_ELECTRON_MIRROR`] ||
process.env[`npm_config_electron_MIRROR`] ||
process.env[`npm_package_config_electron_mirror`] ||
process.env[`ELECTRON_MIRROR`] ||
options['mirror'] ||
defaultValue
而我们很少传入env的,options也没有mirror,所以通常是defaultValue
,具体值如下:
综上,我们可以看到默认情况下安装的时候会在github的release处下载一个平台相关的可执行文件。但是往往在国内github会很慢,所以这就导致了下载失败的问题,如果我们的env中传入ELECTRON_MIRROR
,那就会走该值所对应的地址,通常我们使用淘宝的镜像http://npm.taobao.org/mirrors/electron
。
同样的,在构建Windows系统的时候可能会用到依赖windows-build-tools
,该依赖会安装一个Python,这时可以使用淘宝的镜像文件会更快一些:
# Macos
"PYTHON_MIRROR=http://npm.taobao.org/mirrors/python" npm install --global --production windows-build-tools
# Windows
# 若全局已经安装过cross-env那么就不需要再安装了
npm install -g cross-env
cross-env PYTHON_MIRROR=http://npm.taobao.org/mirrors/python npm install --global --production windows-build-tools
淘宝更多的开源软件的镜像可以参考这里。
启动过程
下载过程基本上我们已经明白了,现在说一下启动过程。一般启动Electron的时候调用的命令是electron .
,而electron命令其实是调用依赖包中的cli.js文件,该文件内容如下:
#!/usr/bin/env node
var electron = require('./')
var proc = require('child_process')
var child = proc.spawn(electron, process.argv.slice(2), { stdio: 'inherit', windowsHide: false })
child.on('close', function (code) {
process.exit(code)
})
const handleTerminationSignal = function (signal) {
process.on(signal, function signalHandler () {
if (!child.killed) {
child.kill(signal)
}
})
}
handleTerminationSignal('SIGINT')
handleTerminationSignal('SIGTERM')
其中var electron = require('./')
的时候是引入当前文件夹下的index.js
文件,内容如下:
var fs = require('fs')
var path = require('path')
var pathFile = path.join(__dirname, 'path.txt')
function getElectronPath () {
if (fs.existsSync(pathFile)) {
var executablePath = fs.readFileSync(pathFile, 'utf-8')
if (process.env.ELECTRON_OVERRIDE_DIST_PATH) {
return path.join(process.env.ELECTRON_OVERRIDE_DIST_PATH, executablePath)
}
return path.join(__dirname, 'dist', executablePath)
} else {
throw new Error('Electron failed to install correctly, please delete node_modules/electron and try installing again')
}
}
module.exports = getElectronPath()
index.js
文件内容很少,主要是返回了一个字符串的地址,也就是当前路径下的dist文件夹下的可执行文件的路径。还记得下载完后往path.txt
里面写了一个可执行文件的路径吗?
我们再回到cli.js
文件中,从代码中可以看出,里面启动了一个子进程,用子进程启动Electron的可执行文件,并且把参数传进去了。最后如果主进程中断或者出现错误,那么就把子进程杀掉。当然你也可以直接双击dist下的可执行文件,它会启动一个默认的页面。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 使用Apple Configurator 2提取商店ipa or app文件
- Spring 自动装配模式之byType
- 使用ATOMac进行Mac自动化测试
- 【赵渝强老师】什么是Oracle的数据字典?
- antd 如何在 src目录下 引入 Public 目录下的文件
- (精编)Python与安全(三)SSTI服务器模板注入
- 一年经验Java开发0713面试
- 【分享】MicroBlaze大内部存储器(AXI BRAM)设计
- Spring Beans 自动装配
- Python将txt文件内容转换成列表
- 刷题记录-猿辅导2020
- redis stream(一):stream命令入门
- os.path.basename()
- 利用frida与ida实战脱壳360加固
- 你知道C语言中的危险函数吗?