Electron 环境搭建

Table of Contents

一. npm 使用

二. 安装electron

2.1 在线安装 

2.2 离线安装

三. 你需要yarn

四. 快速入门

五. 程序发布

参考链接：

---

Electron是跨平台的GUI开发工具，除了swing、QT，开发跨平台UI又多了一个选择。比较著名的vscode，就是通过electron开发的。
Electron 是基于谷歌的Chomium 核心，通过javascript、html、css来开发GUI。本质上是运行一个浏览器，的确很新颖。

 

一. npm 使用

npm init -y test  生成项目package.json
npm install
npm start   运行项目，执行package.json的start指令

配置加速镜像：
npm config ls 
npm config set registry https://registry.npm.taobao.org
npm config get registry

安装库，全局安装-g，否则安装在本地项目路径
npm install express -g
npm list 

 

二. 安装electron

npm install electron --save-dev

不设置加速镜像的情况下，上述安装过程非常缓慢，64M的文件1-2k/s的下载速度。

 

2.1 在线安装 

在设置了加速镜像后，安装提示404错误：

Response code 404 (Not Found) for https://npm.taobao.org/mirrors/electron/v8.1.0/electron-v8.1.0-darwin-x64.zip
    at EventEmitter.<anonymous> (/Users/kett/node_modules/got/source/as-stream.js:35:24)

正常链接为 https://npm.taobao.org/mirrors/electron/8.1.0/electron-v8.1.0-darwin-x64.zip，请求多了字符v。通过设置如下环境变量设置解决：

vi ~/.npmrc
ELECTRON_MIRROR = "https://npm.taobao.org/mirrors/electron/"
ELECTRON_CUSTOM_DIR = "{{ version }}"

重新运行安装命令，可是下载速度还是比较慢。

 

2.2 离线安装

nodejs 下载库时，会先检测缓存是否存在，如不存在才去下载。可预先下载好安装包，从淘宝镜像下载两个文件：

https://npm.taobao.org/mirrors/electron/8.1.0/electron-v8.1.0-darwin-x64.zip

https://npm.taobao.org/mirrors/electron/v8.1.0/SHASUMS256.txt 

按如下目录存放，npm才能识别缓存：

重新安装：

➜  ~ npm install electron --save-dev -g
/usr/local/bin/electron -> /usr/local/lib/node_modules/electron/cli.js

> electron@8.1.0 postinstall /usr/local/lib/node_modules/electron
> node install.js

+ electron@8.1.0
updated 1 package in 12.242s

 

三. 你需要yarn

这可不是hadoop的资源管理器，yarn是facebook发布的一款包管理工具，用来取代npm。npm实在是太慢了，yarn支持并行下载，速度的确杠杠的。

​$ npm install yarn -g 
$ yarn global add electron --dev

yarn global v1.22.4
warning package.json: No license field
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "electron@8.1.1" with binaries:
      - electron
✨  Done in 6.22s.

6.2s就完成了electron的下载安装 ，不是一般的快。

 

四. 快速入门

electron 提供hello world示例代码，可直接下载运行：

git clone https://github.com/electron/electron-quick-start.git
cd electron-quick-start
npm install
npm start

或通过yarn 运行：

yarn 
yarn start

 

最终效果如下：

五. 程序发布

拷贝资源：

cp -Rf /usr/local/lib/node_modules/electron/dist/Electron.app  .
mv * Electron.app/Contents/Resources/app 

启动：

open Electron.app 

 

参考链接：

electron 官方文档：

https://github.com/electron/electron/blob/master/docs/tutorial/installation.md

electron v8.1.1记事本：

https://github.com/spkettas/notepad