電子インストールエラーの問題解決

リンク：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 /＃以上

電子は、クロスプラットフォームのデスクトップアプリケーションのための優れたフレームワークであり、公式ウェブサイトでは、ジェーン・シャオは簡単です与えます：使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用。友人の多くは、デスクトップアプリケーションを実行するために、フロントエンド技術を使用してみたいのですが、エラーに直接インストールする場合、多くの場合、ほとんどのエラーは、次のとおりです。

1 
2 
3

エラー：読みECONNRESETの
＃或者
エラー：電子が正しくインストールに失敗しました...

ソリューション

解決策は、あなたが失敗しインストールしている場合は、置く、シンプルで削除し、再度、次の手順を開始します。node_moduleselectron

セット淘宝ミラー源（このステップはそのない他の依存関係のエラーを確保することで、NRMの使用を推奨）
1
2
NRM -gインストールNPM
NRM使用淘宝網

環境変数の設定とインストール

＃マック系统
ELECTRON_MIRROR =のhttp：//npm.taobao.org/mirrors/electron/ NPMインストール

＃のWindows系统
&&インストールNPM：セット"//npm.taobao.org/mirrors/electron ELECTRON_MIRROR =のhttpを"

そして、それを待ちます。

綿密な調査

上記の設定を通じて、基本的には電子の問題は解決しインストール、そして今、私たちはそれに見て、それが解決されたかを見ることができます。まず、我々はその入力ソースコード NPMこのフォルダがあり、このパスは、電子が依存NPM保存されています。OPEN LOOKあなたはそうエレクトロンがそう何かを依存関係、少数のファイルを検索します。

だから、物事はクロスプラットフォームアプリケーションそれを行う方法のようにA点？まず、見て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
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.jsドキュメントのいくつかの内容、実行可能ファイルのカレントフォルダパスのパスdistのファイルである文字列、の主にリターンアドレス。後にダウンロードすることを忘れないでくださいpath.txt、実行可能ファイル、それのパスの内側に書かれましたか？

我々は戻って行くcli.jsあなたは子供を持つ電子実行可能ファイルを開始し、子プロセスを起動するコードから見ることができ、ファイル、およびパラメータがそれに渡されます。メインプロセスが中断されたり、エラーが発生した場合に最終的に、そして殺すために子供を置きます。もちろん、実行可能ファイル、あなたはまた、distのダウンをダブルクリックすることができ、それがデフォルトページを開始します。