国内配置Electron开发环境的正确方式


(一)环境依赖

  • VS 2015
  • Node.js 32-bit
  • Python 2.7.X 32-bit
  • Node-gpy

(二)安装软件

软件会在 Electron 安装包 提供

Node.js

安装没有特别需要注意的地方

示例下载链接:https://nodejs.org/dist/v8.11.3/node-v8.11.3-x86.msi

Python

为了便捷,留意安装 Python时 的 Customize Python 2.7.14 界面,下拉滚动条,有一个“Add python to Path”,选择“Will be install to...” 把Python添加到环境变量

PS:如果忘记选择可以手动添加 C:\Python27C:\Python27\Scripts 到环境变量

Yarn

使用Yarn可以替代Npm,使包管理解决依赖的速度更快

这里进行一些简要设置,以便更好的使用 Yarn

1)缓存目录

获取缓存目录位置

yarn cache dir

C:\Users\Administrator\AppData\Local\Yarn\Cache\v2

默认存在C盘,可以修改为D盘等其它自定义盘符以免浪费C盘空间,并方便管理。

yarn config set cache-folder D:\YarnCache

2)Yarn 源

国外源地址有时网络访问缓慢,这里通过设置,更换为淘宝源,加快下载包的速度。

获取当前源

yarn config get registry

https://registry.yarnpkg.com

更换为淘宝源

yarn config set registry https://registry.npm.taobao.org

yarn config get registry
https://registry.npm.taobao.org

VS 2015

使用解压工具将 vs2015.3.com_enu.iso 解压缩,双击 vs_community.exe 进行安装

页面可能会有警告,不用管,点击 Continue 继续

默认选择的是 Default,点击 Custom

取消默认选择的 Windows and Web Development

选择 Programming Languages 下的 Visual C++ 项

点击安装,直到安装完成。

(三)检查安装的软件

检查软件版本

输入: python -V
输出: Python 2.7.14

输入: node -v
输出: v8.11.3

输入: yarn -v
输出: 1.10.1

(四)配置 Electron 源

安装 Electron 的时候,需要下载已经构建好的 Electron 运行包,它存放在国外的服务器上,所以下载很慢/或无法下载,需要独立配置 Electron 镜像的源才可以加速访问

计算机 - 属性 - 高级系统设置 - 环境变量 - 新建用户变量

变量名填写:ELECTRON_MIRROR

变量值填写:http://npm.taobao.org/mirrors/electron/

重新打开cmd或者powershell终端

全局安装 Electron 进行测试:

yarn global add electron@2.0.0

全局安装完成后,可以在 C:\Users\Administrator\.electron (缓存目录一)看到已经下载的 Electron 包,不加 global 关键字安装 electron,保存安装包的路径有所不同,是在 C:\Users\Administrator\AppData\Local\electron\Cache (缓存目录二), 无论是否指定 global 关键字进行安装,它们寻找缓存包的顺序是先从缓存目录一,再从缓存目录二。

PS: Electron-builder 在打包应用时也会使用此处配置后的国内镜像下载 electron

### (五)下载 Node.js 头文件

一些依赖模块如 ffi, sqlite 是需要编译使用的,模块依赖了系统相关的动态库,从源码进行编译能保证模块的跨平台性。编译时需要使用到 Node.js 头文件。

# 全局安装 node-gyp
yarn global add node-gyp

# 下载头文件
# Cmd下运行,Powershell运行可能报错
node-gyp install --dist-url https://npm.taobao.org/mirrors/node

运行这条命令,node-gyp 会下载当前系统所安装 Node.js 版本所对应的头文件,下载后的头文件存放在了 C:\Users\Administrator\.node-gyp 目录。

PS: 在 Windows 系统下,如果期望这条命令 yarn add ffi 成功安装并在 Node.js 下运行,需要 VS编译器,Python 环境,Node.js 头文件,缺一不可。npm 或 yarn 安装时直接在引入需要编译使用的模块时,会自动使用内置的 node-gyp 进行编译。

(六)下载 Electron 头文件

Electron 支持 Node 原生模块,但由于和官方的 Node 相比使用了不同的 V8 引擎,所以即使 ffi 模块在上一步已经使用 Node.js 头文件自动进行过编译,但是不能在 Electron 下使用,需要再使用 Electron 的头文件重新编译,使用 node-gyp 重编译进而需要手动设置 Electron 的 headers 的位置。

electron 官方的头文件地址:https://atom.io/download/electron

国内镜像的 electron 头文件地址:https://npm.taobao.org/mirrors/atom-shell/

下载头文件需要指定国内镜像,否则会网络超时

node-gyp install --target=2.0.0 --arch=ia32 --dist-url=https://npm.taobao.org/mirrors/atom-shell/

target 为 Electron 版本号,这个版本号与 package.json 中 "build" - "electronVersion" 指定的版本号保持一致

arch 为平台信息,可选值为 ia32x64

下载回来的头文件也同样保存在了 C:\Users\Administrator\.node-gyp 文件夹下

PS:文件夹名称值得注意,iojs-1.8.2iojs-2.0.04.0.0,不同版本的 electron 头文件下载回来,文件夹名也有一些差别

手动重编译模块(可选)

举例:假设(五)中安装了 ffi 模块,在同目录下运行以下命令可以使用 Electron 头文件重新编译模块,之后模块就可以在 Electron 中使用

cd ./node_modules/ffi/ && node-gyp rebuild --target=2.0.0 --arch=ia32 --target_arch=ia32 && cd ../ref && node-gyp rebuild --target=2.0.0 --arch=ia32 --target_arch=ia32

1)可以把这条命令放在 package.json 文件的 scripts 字段下用 rebuild-ffi 字段保存,以后可以使用 yarn run rebuild-ffi 手动执行编译

2)之所以说这块可选,是因为之后文档介绍的 electron-builder 打包工具提供的命令,可以自动编译模块,更加简单易用

(七)安装打包工具

使用 electron-builder 为 Electron 应用制作安装包方便灵活,package.json 内的 build 字段内的配置即是 electron-builder 的配置项,package.json 内 "scripts" 下添加的 "postinstall": "install-app-deps" 配置功能是指,每次使用 npm 或 yarn 安装依赖包后使用 install-app-deps 工具进行重编译,这个 install-app-deps 工具是 Electron-builder 提供的。

目前 SmartLinkey 2.1 使用的 Electron-builder 版本如下:

λ electron-builder.cmd --version
20.28.4

全局安装

全局安装 electron-builder

yarn global add electron-builder@20.28.4

配置头文件

Electron-builder 提供的 install-app-deps 免去了我们手动输入 node-gyp rebuild... 重编译模块的工作,node-gyp 需要的头文件是存放在C:\Users\Administrator\.node-gyp 目录,而 install-app-deps 所需要用的头文件是存放在 C:\Users\Administrator\.electron-gyp 文件夹,这里需要手动操作,将 C:\Users\Administrator\.node-gyp\iojs-2.0.0 目录复制到 C:\Users\Administrator\.electron-gyp 文件夹内,这样就可以避免 install-app-deps 从国外地址重新下载头文件失败,此处依赖第(六)节内容

现在,可以在 SmartLinkey 2.1 项目目录下运行 yarn 命令安装依赖并自动重编译就不会有报错了

添加 winCodeSign 依赖

打包应用(在项目根目录)

# 此时运行会报错
electron-builder .

这里很可能会陷入阻塞状态,因为 electron-builder 生成安装包需要去国外地址下载依赖文件

  • downloading               parts=1 size=4.9 MB url=https://github.com/electron-us
erland/electron-builder-binaries/releases/download/winCodeSign-2.3.1/winCodeSign-2.3.1.7z

...

4murl=https://github.com/electron-userland/electron-builder-binaries/release
s/download/nsis-3.0.3.2/nsis-3.0.3.2.7z

如果出现这样的状态等待很长时间,可以这样解决:

  1. 手动复制指定版本的依赖到指定文件夹
  2. 下载控制台输出的版本号手动下载放到指定文件夹

如果在安装 electron-builder 环节,指定了@20.28.4 版本,那么安装文件夹内已经放置了打包好后的依赖(electron-builder-20.28.4.7z),可以按如下操作:

将压缩包解压,内容放置在 Cache 文件夹内,目录结构如下

C:\Users\Administrator\AppData\Local\electron-builder\Cache\winCodeSign\winCodeSign-2.3.1

第二种就是根据报错信息得知当前 electron-builder 所需要的依赖版本号,比如打印下载连接 winCodeSign-2.3.1 失败,到 Github 找到这个版本的包下载,解压放在 electron-builder 的 Cache 相应文件夹内,继续运行会提示 NSIS 也无法下载,同理手动下载 nsis-3.0.3.2.7z 压缩包,Github地址,没找到则点击下一页

Github下载地址:https://github.com/electron-userland/electron-builder-binaries/releases

将两个压缩包解压,放置在 Cache 文件夹内,目录结构参照 electron-builder-20.28.4.7z 的文件结构

(八)生成安装包

重新运行 electron-builder . 生成安装包,成功后,安装包在 elect_builder_output 目录下

至此,electron 开发环境搭建完成。