深入浅出Electron:原理、工程与实践
上QQ阅读APP看书,第一时间看更新

1.4 缓存策略

如果开发者使用的是Windows操作系统,那么@electron/get会首先把下载到的Electron可执行文件及其二进制资源压缩包放置到如下目录中:

C:\Users\ADMINI~1\AppData\Local\Temp

这是一个临时目录,这个目录的路径是Node.js通过os.tmpdir()获取的。文件下载完成后,@electron/get会把它复制到缓存目录中以备下次使用。在Windows环境下,默认的缓存目录为:

C:\Users\[your os username]\AppData\Local\electron\Cache

这是通过Node.js的os.homedir()再附加几个子目录得到的(homedir方法获取到的目录路径不包括AppData子目录)。

开发者可以通过为系统设置名为electron_config_cache的环境变量来自定义缓存目录。设置方式与设置镜像的环境变量一致,不再赘述。

知道了缓存目录的位置之后,开发者就可以先手动把Electron可执行文件及其二进制资源压缩包和哈希文件放置到相应的缓存目录中。这样再通过npm install命令安装Electron依赖包时,就会先从你的缓存目录里获取相应的文件,而不是去网络上下载了。这对于工作在无外网环境下的开发者来说无疑是一种非常有价值的手段。

需要注意的是,缓存目录子目录的命名方式是有要求的,如下所示:

// 二进制包文件的路径
[你的缓存目录]/httpsgithub.comelectronelectronreleasesdownloadv11.1.0electron-v11.1.0-win32-x64.zip/electron-v9.2.0-win32-x64.zip
// 哈希值文件的路径
[你的缓存目录]/httpsgithub.comelectronelectronreleasesdownloadv11.1.0SHASUMS256.txt/SHASUMS256.txt

路径中“[你的缓存目录]”下的子目录的命名方式看起来有些奇怪,这其实是下载地址格式化得来的(是通过一个叫作sanitize-filename的工具库,去除了url路径中的斜杠,使得其能成为文件路径)。如果开发者设置了镜像策略,那么这个目录名应该与镜像策略中的地址保持对应,而且SHASUMS256.txt是必不可少的。

在笔者的电脑上,这两个路径形式如图1-2和图1-3所示。

020-1

图1-2 二进制包文件的路径

020-2

图1-3 哈希值文件的路径

从上面两个例图可以看出镜像源是淘宝的。

这就是解决方案之二:通过提前把相关资源放置到缓存目录中解决无法安装Electron依赖包的问题。

install脚本获取到缓存目录下的压缩包后,会执行extractFile方法,此方法会把缓存目录下的二进制文件压缩包解压到当前Electron依赖包的dist目录下:

[project]\node_modules\electron\dist

至此,Electron依赖包才真正安装完全。下面写一段代码来测试一下我们为项目安装的Electron依赖包。

1)在当前项目中的package.json文件内添加一段脚本,代码如下所示:

"scripts": {
  "dev": "electron ./index.js"
}

2)在这个项目的根目录下创建一个名为index.js的JavaScript文件,并录入如下代码:

const { app, BrowserWindow } = require('electron')
let win
app.whenReady().then(() => {
  win = new BrowserWindow({
    width: 800,
    height: 600,
  })
  win.loadURL('https:// www.baidu.com')
})

3)在项目根目录下开启一个命令行工具,使用如下指令启动Electron应用:

> npm run dev

不出意外的话,这行指令会打开一个窗口,这个窗口会加载百度首页,说明我们安装的Electron依赖包没有任何问题。

我们接下去要讲的并不是index.js的内容(相信读者已经通过Electron的官方文档知道那些代码的含义了),而是为什么执行npm run dev指令就能启动[project]\node_modules\electron\dist目录下的Electron可执行程序。