Electron installation error problem solving

Links: https://www.kai666666.top/2019/11/06/%E8%A7%A3%E5%86%B3electron%E5%AE%89%E8%A3%85%E6%8A%A5%E9 % 94% 99% E9% 97 % AE% E9% A2% 98 / # more

Electron is an excellent framework for cross-platform desktop applications, the official website gives Jane Shao is simple: 使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用. A lot of friends also want to try using a front-end technology to do a desktop application, but often when installed directly on the error, most errors are:

1
2
3

Error: read ECONNRESET
# 或者
Error: Electron failed to install correctly ...

Solution

The solution is simple, if you are installing fail, then put node_modulesthe electrondeleted, and then begin the following procedure again.

Set Taobao mirror source (recommended nrm use, this step is to ensure that no other dependencies error)
1
2
npm install -g nrm
nrm use taobao

Set the environment variables and installation

# Mac系统
ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ npm install

# Windows系统
set "ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron" && npm install

And wait for it.

In-depth study

Through the above settings basically solved the problem of Electron installed, and now we can look into it and see how it was resolved. First we enter its source code , which has a npm this folder, this path is stored Electron npm rely on. Open look you will find only a few files, yes Electron dependencies so something.

So such a point of how things do cross-platform applications it? First, look at the package.jsonfile, for easy viewing, I copied a copy, as follows:

{
  "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
set "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.jsFew contents of the documents, mainly the return address of a string, which is the path dist file in the current folder path of the executable file. Remember to download after path.txtwritten inside the path of an executable file it?

We go back to cli.jsthe file, you can see from the code, which starts a child process, started Electron executable file with the child, and the parameters passed into it. Finally, if the main process is interrupted or an error occurs, then put the child to kill. Of course, executable files, you can also double-click dist down, it will start a default page.