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

Published: 2019-02-02

Tags: Electron

本文总阅读量次
本文于20190202日整理，部分内容已不适用，请查阅最新文章


本文于20190202日整理，部分内容已不适用，请查阅最新文章


本文于20190202日整理，部分内容已不适用，请查阅最新文章


《国内配置Electron开发环境的正确方式（2020.03重新整理）》



（一）环境依赖

  • 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:\Python27 和 C:\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 为平台信息，可选值为 ia32 和 x64

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

PS：文件夹名称值得注意，iojs-1.8.2，iojs-2.0.0，4.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 开发环境搭建完成。