初学electron，想尝试做一些客户端来玩，在初始化项目的时候就失败了，并且鼓捣了很久，严重的打击了我，但总算初始化成功了，这里记录下来，希望能帮助到需要的朋友。
请耐心的看，一步一步找到答案。
我用的是macOs，如果是使用windows的朋友，请根据自己的情况做修改。
- 我按照官网教程，将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增加两个环境变量
- npm_config_electron_mirror="https://npm.taobao.org/mirrors/electron/"
- 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的分享，我有参考他的分享，然后自己看了源码，并进行记录了这次的问题。
网友评论