9

第一次体验 electron,就遇到了安装一直不成功的问题,网上的方法基本试过,总结就是切换源。但是基本只说了设置ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/",对,在以前的版本上只设置这个就行。但 7.0.0 不行,看下面我的失败过程及解决过程。

官网示例

#Clone this repository
git clone https://github.com/electron/electron-quick-start
# Go into the repository
cd electron-quick-start
# Install dependencies
npm install
# Run the app
npm start

跟着运行,走不通,卡在了 node install.js这里

image.png

网上方法试了一通,不行。最后去看的源码,先上我的解决方法。

解决方法

安装 cross-env ,是为了给后面的命令设置环境变量(设置proccess.env),你也可以不安装这个,先自己设好系统环境变量

更新下,新版本已经是 7.0.1 了, 如果你用的是 7.0.1, 注意修改为cross-env npm_config_electron_mirror="https://npm.taobao.org/mirrors/electron/" npm_config_electron_custom_dir="7.0.1" npm install, 也就是 npm_config_electron_custom_dir要设置为版本号`**

#Install cross-env, 注意是全局安装
npm install -g cross-env
#Clone this repository
git clone https://github.com/electron/electron-quick-start
# Go into the repository
cd electron-quick-start
# Install dependencies
cross-env npm_config_electron_mirror="https://npm.taobao.org/mirrors/electron/" npm_config_electron_custom_dir="7.0.0" npm install

成功安装(这个截图是前面没安装cross-env,在 mac 电脑上的结果)

image.png

npm start

image.png

解决过程

进入 node_modules文件夹里的 electron文件夹,打开里面的 install.js文件

image.png

查看 downloadArtifact函数的定义,里面的 getArtifactRemoteURL获取远程下载的地址,可以通过 log打印出来查看,这样就能看出为什么下载不下来

image.png

加个打印,查看下载地址,将打印出来的地址输入到浏览器中,查看结果,可以看到确实很难下载

image.png

这就试试网上的换源方法,在 node命令前添加参数,设置当前运行的 process.env里的值(从后面代码看出这样设置的)

ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/" node install.js

image.png

依然下载不下来,打印出来的网址为https://npm.taobao.org/mirrors/electron/v7.0.0/electron-v7.0.0-darwin-x64.zip 与可以查看的源地址比较,发现 v7.0.0 多了个 v,下图是可以下载的源图

image.png

还是去看看这个下载地址是怎么生成的吧,查看 getArtifactRemoteURL 函数,如下

image.png

可以看出是由 base, path, file 拼接起来的,默认参数如下

image.png

可以通过设置 process.env来修改 basepathfile,设置方法如前面的 nodenpm命令前添加的 key-value值。如修改 base,命令行前添加 ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/",设置 basekey可以写成 ELECTRON_MIRROR,也可以写成 npm-config-electron-mirror,(其他形式参见代码)。来看看 path,由 version决定或者 process.env里的 npm-config-electron-custom-dir(多种形式都可以),这个 version来源于 electron文件夹下的 package.json文件,可以看到是 7.0.0

image.png

image.png

为何多了个v,回到downloadArtifact函数,可以看到代码添加的v

image.png

image.png

所以要得到正确的源,就自己设置process.env里的npm-config-electron-custom-dir

其他的方法,比如从 https://npm.taobao.org/mirrors/electron/7.0.0/ 下载离线包,放在缓存的位置,设置缓存等,可以看代码设置参数

看一下不同平台的默认参数,纯解惑

image.png


zeroyl
156 声望2 粉丝

下一篇 »
SmartGit