Electron实战（一）安装

Posted on | In | Visitors:
Words : 1.3k | Reading ≈ 4 min

electron-cover.png

前言

我们知道，JavaScript 是用来开发网站的脚本语言。Javascript 开发出来的网页必须依赖浏览器来解析。 而桌面客户端，通常是由 C++ 、C# 等语言来完成。不过现在，我们可以用 JavaScript 来开发桌面客户端了！当然，要借助一点外力，那就是：Electron。

什么是Electron？

Electron 是一个使用 JavaScript，HTML 和 CSS 等Web技术构建跨平台的桌面应用程序的框架。这意味着，如果你可以建一个网站，你就可以建一个桌面应用程序。

Electron 基于 Chromium 和 Node.js，它可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用。你可以把它看作一个 Node. js 的变体，只不过它专注于桌面应用而不是 Web 服务器端。

但这不意味着 Electron 是某个图形用户界面（GUI）库的 JavaScript 版本。相反，Electron 使用 web 页面作为它的 GUI，所以你可以把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。

历史

2013年4月，Atom 编辑器问世，作为实现它的底层框架 Atom Shell 逐渐被熟知。

2014年5月，Atom Shell 开源。

2015年4月，Atom Shell 改名为Electron。

用Electron开发的桌面应用

Electron 已经被多个开源应用软件所使用，除了 Atom，著名的编辑器 VsCode 也是基于 Electron 实现的。

打开 VsCode，点击帮助菜单中的Toggle Developer Tools，可以在界面上看到我们熟悉的 Chrome devtool，如下图：

vscode-devtool.jpg

Electron 程序基本结构

从开发的角度来看, Electron application 本质上是一个 Node.js 应用程序。与 Node.js 模块相同，应用的入口是 package.json 文件。一个最基本的 Electron 应用一般来说会有如下的目录结构：

1
2
3
4
your-app/ 
├── package.json 
├── main.js 
└── index.html

说了这么多，是不是有些心痒痒，迫不及待想知道怎么上手electron，用 JS 来捣鼓桌面应用了？别着急，我们先把开发环境搭好。

安装Electron

Electron 通过 npm 来安装：

1
npm install electron --save-dev

但因为默认会从 GitHub 上下载，即使将 npm register 指向 taobao 镜像也不行，它内部还是会通过 GitHub 的发布下载页面来下载 electron 的二进制 release 文件，如果你不能翻墙，安装会很慢，基本上是下不下来。

所以如果你不能翻墙，又想要顺利下载 electron，就得自定义 electron 的镜像和缓存。

自定义镜像

你可以通过环境变量来覆盖 Electron 二进制文件的URL和文件名。这个URL将被 @electron/get 使用，格式如下：

1
url = ELECTRON_MIRROR + ELECTRON_CUSTOM_DIR + '/' + ELECTRON_CUSTOM_FILENAME

例如，使用 Electron 的中国镜像（taobao）：

1
ELECTRON_MIRROR="https://cdn.npm.taobao.org/dist/electron/"

我们需要在项目根目录下，添加一个名为 .npmrc 的文件，将上面的镜像配置写进去。这样当我们进行 npm install 的时候，就会读取项目根目录下的 .npmrc 文件使用你配置的镜像地址来下载了。

自定义缓存

或者，你可以直接覆盖本地缓存。@electron/get 会在本地的特定目录缓存下载下来的二进制文件，来缓解你的网络压力，提升安装速度。所以我们可以使用该缓存文件夹来提供 Electron 的定制版本，或者避免进行网络连接。

在不同操作系统下，Electron 默认的缓存目录如下：

  • Linux: $XDG_CACHE_HOME or ~/.cache/electron/

  • MacOS: ~/Library/Caches/electron/

  • Windows: $LOCALAPPDATA/electron/Cache or ~/AppData/Local/electron/Cache/

另外：
在使用旧版本 Electron 的环境中，我们也可以在 ~/.electron 中找到缓存。
我们还可以通过提供 electron_config_cache 环境变量，来重写本地缓存路径。

缓存包含两部分内容：

  1. 版本的官方zip文件

  2. 校验和（存储格式为文本文件）

典型的缓存可能如下所示：

1
2
3
4
├──httpsgithub.comelectronelectronreleasesdownloadv1.8.1electron-v1.8.1-darwin-x64.zip
│   └── electron-v1.8.1-darwin-x64.zip
├──httpsgithub.comelectronelectronreleasesdownloadv1.8.1SHASUMS256.txt
│   └── SHASUMS256.txt

我们可以直接从淘宝源下载二进制包electron-v1.8.1-darwin-x64.zip，在缓存路径下（例如我这里是 Mac 中的 ~/Library/Caches/electron/ ）新建上述目录结构，放进去。

electron 淘宝源下载地址（有两个，任意选一个下载就行）：

1.https://npm.taobao.org/mirrors/electron/8.1.1/electron-v8.1.1-darwin-x64.zip

2.https://cdn.npm.taobao.org/dist/electron/v8.1.1/electron-v8.1.1-darwin-x64.zip

校验和淘宝源下载地址：

https://npm.taobao.org/mirrors/electron/8.1.1/SHASUMS256.txt

配置完缓存后，再来 npm install ，npm 会先从缓存目录中读取二进制缓存，由于我们已经下载好了，npm 会直接使用缓存，而不会再去网络上获取了。

结语

现在，我们已经准备好了 electron 的开发环境了，接下来我们将要开发一个最简单的 elecrton 应用。（下一篇待续）

有兴趣交流的小伙伴可以在这里留言讨论：https://github.com/yc111/yc111.github.io/issues/1


文章首发于于公众号「前端手札」，喜欢的话可以关注一下哦。

qianduanshouzha-gzh.png