幸运的兔脚

杂记electron
2020年03月18日

npm 安装 Electron 慢的解决方案

今天开始学习 Electron，结果一上来就遇到了大麻烦……

卡住了

这个卡着不动的画面大家应该挺眼熟吧，放了 10 分钟居然都没动过，太悲伤了。

不过天无绝人之路，还好文档给出了解决方案，果然优先看了一眼文档是个正确的选择。

至于为啥会卡的原因咱就不深纠了，毕竟是在国内理由什么的大家都懂，所以不废话直接进正题吧。

结论

如果对后面的解析不感兴趣，那直接看这里就可以了。

  • 方案一：使用自定义镜像
    windows：

    set ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/"
set ELECTRON_CUSTOM_DIR="8.1.1" # 你要安装的electron版本

    linux：

    export ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/"
export ELECTRON_CUSTOM_DIR="8.1.1" # 你要安装的electron版本

  • 方案二：使用代理
    windows：

    set ELECTRON_GET_USE_PROXY=1 # 值为1或true
set GLOBAL_AGENT_HTTP_PROXY=http://proxy.example.com:1080
set GLOBAL_AGENT_HTTPS_PROXY=https://proxy.example.com:1080

    linux：

    export ELECTRON_GET_USE_PROXY=1 # 值为1或true
export GLOBAL_AGENT_HTTP_PROXY=http://proxy.example.com:1080
export GLOBAL_AGENT_HTTPS_PROXY=https://proxy.example.com:1080

使用自定义镜像和缓存

自定义镜像

根据文档描述，在无法访问 GitHub 或需要提供自定义构建时，可以通过环境变量提供镜像或现有的缓存目录来指定镜像来源。

url = ELECTRON_MIRROR + ELECTRON_CUSTOM_DIR + '/' + ELECTRON_CUSTOM_FILENAME

在国内，如果你手边正好没有科学上网的手段，那么淘宝镜像就是你最好的选择。

window：

set ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/"

linux：

export ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/"

嘛~可惜光设置上面这项还不能解决问题，如果直接下载的话，你将会收到一个 404 报错……

404

这个问题出现是因为 electron 的下载逻辑会在version后面多加一个v，嘛~毕竟人家默认是从 GitHub 上下载文件，所以这个v是为了对应 GitHub 的下载路径。

下载逻辑

解决方法通过对比下载路径不难看出，只要再指定版本号就可以解决问题。

  • github
    ELECTRON_MIRROR：https://github.com/electron/electron/releases/download/
    ELECTRON_CUSTOM_DIR：v8.1.1
    ELECTRON_CUSTOM_FILENAME：electron-v8.1.1-win32-x64.zip
  • taobao
    ELECTRON_MIRROR：https://npm.taobao.org/mirrors/electron/
    ELECTRON_CUSTOM_DIR：8.1.1
    ELECTRON_CUSTOM_FILENAME：electron-v8.1.1-win32-x64.zip

window：

set ELECTRON_CUSTOM_DIR="8.1.1"

linux：

export ELECTRON_CUSTOM_DIR="8.1.1"

缓存

首次安装 electron 之后，electron 会在本地建立缓存，所以之后的安装都可以使用缓存来进行安装。

不同系统的缓存路径见文档#缓存部分。

使用代理

刚开始觉得这个方案很简单，只要在 bash 里设置下http_proxy和https_proxy就好了，但是在下载过程中却发现 npm 包虽然都通过代理下载的很快，但唯独 electron 的下载完全没有走代理，再看看官方文档对于代理也只有一句简短的描述，着实让人有点无从入手。

研究了半天之后，我终于发现ELECTRON_GET_USE_PROXY只是一个开关，起初我还以为这个值是用于配置代理地址的，只有当其为ture的时候才会启用代理，而代理本身则是通过global-agent来配置的。

官方文档给出了global-agent配置文档：

so，在了解了之后，配置起来就能抓到感觉了。

windows：

set ELECTRON_GET_USE_PROXY=1 # 值为1或true
set GLOBAL_AGENT_HTTP_PROXY=http://proxy.example.com:1080
set GLOBAL_AGENT_HTTPS_PROXY=https://proxy.example.com:1080

linux：

export ELECTRON_GET_USE_PROXY=1 # 值为1或true
export GLOBAL_AGENT_HTTP_PROXY=http://proxy.example.com:1080
export GLOBAL_AGENT_HTTPS_PROXY=https://proxy.example.com:1080

配置完之后，下载速度果然有了肉眼可见的提升 👍

结论

\ 淘宝镜像 代理
优点 国内网络优化，下载快。 原生下载，该从哪下就从哪下。
缺点 需要手动指定 electron 版本。 下载速度受代理服务影响。

淘宝镜像真的是国内广大程序猿的福音，如果手边没有靠谱合适的代理的话，淘宝镜像就是你的不二之选。

但是，如果你像我一样，对淘宝镜像有着一股莫名的拒绝，那通过代理来进行安装也是个不错的选择。

参考：