初识electron7.x安装失败

初学electron,想尝试做一些客户端来玩,在初始化项目的时候就失败了,并且鼓捣了很久,严重的打击了我,但总算初始化成功了,这里记录下来,希望能帮助到需要的朋友。
请耐心的看,一步一步找到答案。
我用的是macOs,如果是使用windows的朋友,请根据自己的情况做修改。

  1. 我按照官网教程,将demo拿下来运行。
# 克隆这仓库
git clone https://github.com/electron/electron-quick-start
# 进入仓库
cd electron-quick-start
# 安装依赖库
npm install
# 运行应用
npm start

以为这样就能成功,但是!没有!


image.png

如图,在npm install之后,会出现node install.js,然后就卡住卡了很久,然后出现错误。
我的第一反应是翻墙工具没开,然后我开了翻墙工具,但还是失败了···我觉得可能是我的梯子速度不够快,那我就将npm切换成淘宝的镜像源。然而···没什么卵用。
然后我又尝试了使用yarn去安装,一样是,没什么卵用。
接着我去百度,百度到的结果无非是加镜像源,如下:

ASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass
phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs
ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron
ELECTRON_BUILDER_BINARIES_MIRROR=http://npm.taobao.org/mirrors/electron-builder-binaries/

我加上试了,但还是没什么用(据说是在6.x中可以的,但现在已经是7.1.5了,我是没有成功的)。看这个提示,应该是没有获取到返回资源,并且在某一个时候,好像在安装过程有了404的提示,或许是加某个镜像源没找到。我思考,这肯定还是跟镜像源有关,于是我觉得去看代码,看到底是不是加载镜像有问题。
在npm install失败之后,在node_modules文件夹下会有一个install.js,这就是安装过程中出现的node install.js。用编辑器打开。


image.png

会发现这个downloadArtifact函数是和下载electron有关的,在最上面找到它的引入部分const { downloadArtifact } = require('@electron/get'),发现是从@electron/get里面引入的,再进入到这个库中。
在这个库的入库函数index.js中找到关于这个函数的定义,找到下载的url,并添加console打印出来,如图:

image.png

这时候,在进入node_modules中删除掉electron文件夹,就这一个文件夹,然后再次npm install,会看到即使是切换了淘宝的镜像源,使用的还是github的镜像源。


image.png

找到构建路径的函数引用var artifact_utils_1 = require("./artifact-utils");,发现是在artifact-utils中定义的,进入到里面去看。

image.png

看到这好像基本了解了,这个镜像的下载路径是根据环境变量去获取的,如果环境变量没有设置,那么会从BASE_URL去获取,可以看出这个BASE_URL是github的地址,和我们刚才打印出来的是一致的。
所以,我们需要在本地添加相应的环境变量,然后再安装。可是在安装的时候就使用环境变量,怎么使用呢?
这里我想到了cross-env这个工具,非常好用,我直接用了全局安装。
npm install -g cross-env
我在安装过程中还报了一次错,直接关闭终端后再打开就安装成功了。
对比淘宝镜像地址和github的地址,看我们需要设置什么环境变量:

#淘宝
https://npm.taobao.org/mirrors/electron/7.1.5/
#原镜像
https://github.com/electron/electron/releases/download/v7.1.5/electron-v7.1.5-darwin-x64.zip
#代码的路径组成:
function getArtifactRemoteURL(details) {
    var opts = details.mirrorOptions || {};
    var base = mirrorVar('mirror', opts, BASE_URL);
    if (details.version.includes('nightly')) {
        base = mirrorVar('nightly_mirror', opts, NIGHTLY_BASE_URL);
    }
    var path = mirrorVar('customDir', opts, details.version);
    var file = mirrorVar('customFilename', opts, getArtifactFileName(details));
    return "" + base + path + "/" + file;
}

可以看出主要是base+path组成,至于file就不详细研究了了,这是下载对应的包,有兴趣的可以自行研究。
base需要换成https://npm.taobao.org/mirrors/electron,path需要换成7.1.5
所以使用cross-env增加两个环境变量

  1. npm_config_electron_mirror="https://npm.taobao.org/mirrors/electron/"
  2. npm_config_electron_custom_dir="7.1.5"
    完整的安装命令为:
    cross-env npm_config_electron_mirror="https://npm.taobao.org/mirrors/electron/" npm_config_electron_custom_dir="7.1.5" npm install
    注:如果electron版本变化了,那么7.1.5需要改为相应的版本号。
    image.png

安装完成后执行npm start,就打开应用了:


image.png

最后,需要感谢淘宝跟我们做的镜像;
也感谢zeroyl的分享,我有参考他的分享,然后自己看了源码,并进行记录了这次的问题。

推荐阅读更多精彩内容