前言
Electron作为一款跨平台的桌面应用端解决方案已经风靡全球。作为开发者,我们几乎不用关心与操作系统的交互,直接通过Web前端技术与Electron提供的API就可以完成桌面应用端的开发。
然而,为什么国内使用Electron的踩坑文章数不胜数,主要原因是Electron为了支持跨平台,为不同的操作系统平台进行了适配,将chromium内核与node集成到了一起,屏蔽了底层操作系统的细节,所以在不同的平台上有着不同的二进制基座。在开发的过程中,我们必须要下载对应的平台的基座,才能正常开发。也就是说,我们npm install electron -D
的时候,一定是下载了Electron的二进制基座的。那么这个下载的过程在哪里?为什么速度这么慢呢?本文将通过Electron的安装源码一一说明。
安装Electron
在安装之前,我们先模拟一下没有配置任何关于Electron二进制镜像的npm配置文件,在~/.npmrc
里面,只有一些默认的配置:
# ~/.npmrc文件
registry=https://registry.npm.taobao.org/
prefix=D:Programsnodejsglobal_modules
cache=D:Programsnodejscache_modules
python=D:ProgramsPython39python.exe
然后,创建一个名为electron-install-example
的文件夹作为本此测试的Demo项目目录,并在进入该目录后执行npm init
初始化node项目。
最后,使用命令行安装Electron:npm install electron -D
。在短暂的npm包安装后,我们会发现会卡在一个地方:
![d3c4cde8d83d42304277ff06716f0a73.png](https://i-blog.csdnimg.cn/blog_migrate/5694d3dc86df31f0c58416c08e09c854.jpeg)
这时候,很多开发者就会开始在网络上搜索:'安装Electron卡住',并且也很容易得到解决方案:
在~/.npmrc
文件中,单独设置Electron的镜像electron_mirror="https://npm.taobao.org/mirrors/electron/"
于是我们按照搜来的解决方案重新配置我们的.npmrc
文件:
# ~/.npmrc文件
registry=https://registry.npm.taobao.org/
prefix=D:Programsnodejsglobal_modules
cache=D:Programsnodejscache_modules
python=D:ProgramsPython39python.exe
# 单独设置Electron的镜像
electron_mirror="https://npm.taobao.org/mirrors/electron/"
设置完成后,重新进行npm install
,发现能够很快完成下载并继续开发。通过本文,我们深入细节,看看为什么Electron设置了单独的镜像后,就能够正常且快速完成下载安装。
深入下载细节
进入项目根目录下/node_modules/electron/
(后续除特殊情况外,提到的目录路径都是统一相对于项目根目录)目录中,查看package.json文件中的scripts脚本节点:
![0b69242f9ab8278d3019e527e0342ca1.png](https://i-blog.csdnimg.cn/blog_migrate/b295ee2f0963d3a1428d3337c9f3fc38.jpeg)
了解npm的朋友们知道,postinstall
中的脚本会在npm包完成安装后执行。
也就是说,npm install -D electron
完成以后,会在node_modules/electron
目录中立刻执行node install.js
。所以,我们进一步查看install.js文件,看看它到底执行了什么。核心代码如下:
![9f17f01b94679d6a46ddcdac42ef04e8.png](https://i-blog.csdnimg.cn/blog_migrate/b66c46d8d621af86a7f1a58eaa096de3.jpeg)
代码特别容易理解:在没有缓存文件的时候,会使用@electron/get
提供的downloadArtifact