search

scarcoco / projx

5 stars 0 forks source link

electron 入门 #12

Open scarcoco opened 4 years ago

scarcoco commented 4 years ago

安装

npm install --save-dev electron

该命令通过 @electron/get 从 GitHub 下载 Electron 预编译好具体版本的二进制包，具体地址为：https://github.com/electron/electron/releases/tag/v$VERSION

比如 v7.1.8 版本的地址为： https://github.com/electron/electron/releases/tag/v7.1.8 https://github.com/electron/electron/releases/

比如 v7.1.8（Mac版） 的具体下载地址为： https://github.com/electron/electron/releases/download/v7.1.8/electron-v7.1.8-darwin-x64.zip

最终的下载地址是： s3.amazonaws.com，所以速度相当慢。

方法一

查看 @electron/get 的源码，可以看到最终的下载地址构成如下：

url = ELECTRON_MIRROR + ELECTRON_CUSTOM_DIR + '/' + ELECTRON_CUSTOM_FILENAME

代码如下：

function mirrorVar(name, options, defaultValue) {
    const lowerName = name.replace(/([a-z])([A-Z])/g, function (_, a, b) { return a + "_" + b; }).toLowerCase();
    return (process.env["NPM_CONFIG_ELECTRON_" + lowerName.toUpperCase()] ||
        process.env["npm_config_electron_" + lowerName] ||
        process.env["npm_package_config_electron_" + lowerName] ||
        process.env["ELECTRON_" + lowerName.toUpperCase()] ||
        options[name] ||
        defaultValue);
}
export function getArtifactRemoteURL(details) {
    const opts = details.mirrorOptions || {};
    const base = mirrorVar('mirror', opts, BASE_URL);
    if (details.version.includes('nightly')) {
        base = mirrorVar('nightly_mirror', opts, NIGHTLY_BASE_URL);
    }
    const path = mirrorVar('customDir', opts, details.version);
    const file = mirrorVar('customFilename', opts, getArtifactFileName(details));
    return "" + base + path + "/" + file;
}

可以看出，优先使用的 npm 传递参数，其次是 package.json 中配置的参数，再其次是环境变量中参数，最后才是根据系统生成的版本信息。

v7.1.8 的淘宝完整下载地址是： https://cdn.npm.taobao.org/dist/electron/v7.1.8/electron-v7.1.8-darwin-x64.zip

因此，可以通过设置相应的环境变量来解决下载慢的问题：

export ELECTRON_MIRROR="https://cdn.npm.taobao.org/dist/electron/"
export ELECTRON_CUSTOM_DIR="v7.1.8"
export ELECTRON_CUSTOM_FILENAME="electron-v7.1.8-darwin-x64.zip"

npm install --save-dev electron --verbose

至此，可以正常下载，但是遇到了如下问题。

UnhandledPromiseRejectionWarning: Error: Could not parse checksum file at line 1: PK

具体原因 @electron/get 需要同时下载 zip 文件和 SHASUMS256.txt 文件，上述环境变量把两者的地址配置为一模一样，导致 zip 文件内容最终写入到了 SHASUMS256.txt 中，所以无法解析。

具体可以查看缓存目录下 SHASUMS256.txt 文件内容。

~/Library/Caches/electron/
~/.electron/

问题原因清楚后，解决方法也知道了，新开窗口或移除刚刚设置的后两个环境变量

unset ELECTRON_CUSTOM_DIR
unset ELECTRON_CUSTOM_FILENAME
export ELECTRON_MIRROR="https://cdn.npm.taobao.org/dist/electron/"
npm install --save-dev electron --verbose

有时候不需要安装跳过安装 二进制包时，操作如

export ELECRON_SKIP_BINARY_DOWNOAD=1
npm install

方法二

既然知道淘宝下载地址，可以自己手动操作，查看 node_modules/electron/install.js，主要做了4件事情：

因此当 npm install --save-dev electron --verbose 卡住时，直接下载结束，下载 zip 包，解压到 node_modules/electron/dist 目录下，重新再执行安装即可。

scarcoco commented 4 years ago

方法三

指定环境变量安装，具体参考：https://npm.taobao.org/mirrors/

scarcoco commented 4 years ago

electron

https://github.com/electron-react-boilerplate/electron-react-boilerplate