如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接信息。

无论是选择electron-builder还是electron-packager,甚至其它的各种流行electron打包工具,总是会绕不开一个问题:脚本会下载特定版本的electron的prebuild版本。而对于国内的广大electron开发者来说,这个过程往往是非常漫长并且痛苦的。如何解决速度慢的这个问题呢?欢迎阅读苏南大叔的本篇文章内容。

本文的主要测试环境是window和mac,npm的版本号均为5.6.0

正确设置ELECTRON_MIRROR,快速下载electron预编译文件 - electron-logo

正确设置ELECTRON_MIRROR,快速下载electron预编译文件(图11-1)

淘宝的electron源

淘宝的这个electron镜像,真心是国内广大猿类的救星。本文中的主角也是这个electron的淘宝镜像,地址如下:

在正式开始本文的内容之前,欢迎大家先阅读一下苏南大叔的这篇文章。

适用的症状

有下面截图类似问题的同学,适合查看本篇内容。如果截图中的下载过程很快的话,就不需要查看本篇内容了。

正确设置ELECTRON_MIRROR,快速下载electron预编译文件 - electron-download-2

正确设置ELECTRON_MIRROR,快速下载electron预编译文件(图11-2)

正确设置ELECTRON_MIRROR,快速下载electron预编译文件 - electron-download-3

正确设置ELECTRON_MIRROR,快速下载electron预编译文件(图11-3)

特征就是下载这些特定版本的electron的时候,速度是几K到几十K每秒的速度,甚至是直接下载失败。而通过本文的办法,这个速度可以提高到几M每秒,瞬间下载完毕。

解决方案原理描述

在官方渠道以及各种网上教程上,都是在告诉大家要设置.npmrcELECTRON_MIRROR。但是,这个ELECTRON_MIRROR真的有用么?如何才能真正生效呢?

经过苏南大叔的尝试,至少在目前的最新版本5.6.0版本的npm(win)上,这个变量是不生效的。当然,也许是苏南大叔的开发环境的问题。但是,可以确定的是:和苏南大叔一样,设置了ELECTRON_MIRROR,也无法使用淘宝的electron镜像的人,不在少数。

electron-builderelectron-packager的背后,都是electron-download。其github上面的主页是:https://github.com/electron-userland/electron-download 。官方的介绍文字上,也非常明显地向大家推荐:建议国内用户在.npmrc里面设置ELECTRON_MIRROR

正确设置ELECTRON_MIRROR,快速下载electron预编译文件 - github-recommand

正确设置ELECTRON_MIRROR,快速下载electron预编译文件(图11-4)

但是,不生效,有木有!为了证明,它还是从github上面艰难的下载electron的预编译版本,苏南大叔使用了wireshake抓包工具,可以明显的看到:下载的时候,连接的ip是指向国外的。然后,苏南大叔对electron-download的源码,进行了小的改动,使它能够显示出,当前连接的electron资源文件的地址。

electron-builderelectron-packager下面的node_modules目录下面,都存在着一份electron-download。苏南大叔就是修改的这个源码。这些全局的node命令的位置,可以通过npm config get prefix查看。很好理解,大家自己试试。

以苏南大叔比较喜欢的electron-packager为例,文件位置为:

  • \electron-packager\node_modules\electron-download\lib\index.js

如何查找这个全局包的基础路径,请查看这篇文章:https://newsn.net/say/npm-whereis.html

找到第26行,baseUrl()函数。

  get baseUrl () {
    return process.env.NPM_CONFIG_ELECTRON_MIRROR ||
      process.env.npm_config_electron_mirror ||
      process.env.ELECTRON_MIRROR ||
      this.opts.mirror ||
      'https://github.com/electron/electron/releases/download/v'
  }

我们对这个函数用console.log调试一下,就可以发现:本来应该从.npmrc中读取到的ELECTRON_MIRROR,并不存在于process.env.ELECTRON_MIRROR变量之中,这个官方极力推荐的渠道是不通的。最终导致走的还是默认通道github,也就是对于国人最不友好的下载通道。

正确设置ELECTRON_MIRROR,快速下载electron预编译文件 - download_determine

正确设置ELECTRON_MIRROR,快速下载electron预编译文件(图11-5)

解决方案一(win系统推荐)

对于win系统,可以修改全局变量,很简单。新建用户全局变量即可。名称为ELECTRON_MIRROR,值为:http://npm.taobao.org/mirrors/electron/ 。见下图。

正确设置ELECTRON_MIRROR,快速下载electron预编译文件 - env_electron

正确设置ELECTRON_MIRROR,快速下载electron预编译文件(图11-6)

注意,保存之后,要重新打开一个命令行窗体,这些全局变量才会生效!马上体验一下刷刷下载的感觉吧~

正确设置ELECTRON_MIRROR,快速下载electron预编译文件 - quick_download

正确设置ELECTRON_MIRROR,快速下载electron预编译文件(图11-7)

ps一下:这些下载好的文件位于:%LOCALAPPDATA%/electron/Cache下面。

解决方案二(mac系统推荐)

mac系统下,需要修改/etc/bashrc 文件,当然修改的方法是苏南大叔自己想的,测试有效才贴上来的。见下图,在/etc/bashrc 文件中,增加一条内容。

export ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/

修改保存之后,记得执行一下source命令使变量及时生效。

source /etc/bashrc

正确设置ELECTRON_MIRROR,快速下载electron预编译文件 - mac_bashrc

正确设置ELECTRON_MIRROR,快速下载electron预编译文件(图11-8)

解决方案三

这个方案不论系统,统一有效,就是在相关的命令之前都增加下面的命令。
比如运行electron-packager ./的时候,增加ELECTRON_MIRROR=<repo_url>类似字样:

ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ electron-packager ./

正确设置ELECTRON_MIRROR,快速下载electron预编译文件 - download_determine2

正确设置ELECTRON_MIRROR,快速下载electron预编译文件(图11-9)

解决方案四

如果您不想修改环境变量的话,这里还有个比较适合小白的方式。就是使用迅雷下载好对应的安装zip包和SHASUM256.txt文件,然后复制到electron的临时目录,然后再执行对应的命令,也是可以快速安装的。下图仅作示意。下载的地址是:

正确设置ELECTRON_MIRROR,快速下载electron预编译文件 - direct_download

正确设置ELECTRON_MIRROR,快速下载electron预编译文件(图11-10)

正确设置ELECTRON_MIRROR,快速下载electron预编译文件 - direct_download_1

正确设置ELECTRON_MIRROR,快速下载electron预编译文件(图11-11)

注意:这里的txt文件需要重命名一下,加上版本号的字样。

总结

在本文中,我们学习了:如何利用新建环境变量ELECTRON_MIRROR的方式,加速electron预编译版本的下载。至于.npmrc里面的ELECTRON_MIRROR为什么没有生效,这个到底是不是个美丽的误会呢?暂时无法得知。聪明的读者,您有什么想法么,欢迎留言给苏南大叔。

更多electron开发的经验文章,敬请关注苏南大叔的博客。https://newsn.net/tag/electron/

  【npm】秘籍文章入口,仅传授于有缘之人  npm    cnpm

欢迎转载传播本篇原创文章,转载请保留链接及作者信息。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

苏南大叔需要你的支持

打赏任意金额,发送截图到邮箱 shang@newsn.net ,可以领取精选回馈如下(任选其一):
  • 《前端视频教程大礼包》一套
  • 《wordpress精选皮肤》一套
  • 《dedecms织梦精选模板》一套
感谢您的打赏,让我更有动力,将更多精彩教程文章,呈现给大家!谢谢!

岁月静好

关注互联网发展,关注苏南大叔的《程序如此灵动~》博客
本文章来自:程序如此灵动~
博客地址为:https://newsn.net/
原文地址为:https://newsn.net/say/electron-download-prebuild.html
上一篇好文:npm的.npmrc文件在哪里?缓存及全局包文件在什么位置?
下一篇好文:如何关闭mac系统的SIP完整性保护/rootless机制

如果您转载了本文章,出于某种原因,并没有注明作者或者出处。
在这里,苏南大叔也表示理解和支持。因为苏南大叔深深地明白:
您会在合适的时机,合适的地方,给本博客一个外链。对吧?
您若开心,便是安好!岁月静好,但愿世界和平,没有纷争~