【本系列文章基于Electron 9.0.3 版本,开发平台为windows】
1. 安装node
版本需与Electron兼容,选择12.12.0,32bit版本【兼容32bit和64bit系统】
下载地址:https://nodejs.org/download/release/v12.12.0/
2. npm源设置
因为某些原因,我们可以选择用淘宝源——
npm install cnpm -g --registry=https://registry.npm.taobao.org
3. 切换到项目根目录,安装相关依赖
cnpm install
需要特别注意,Electron需要全局安装:
cnpm install electron@9.0.3 -g
4. 安装C++模块编译环境
使用了addons【http://nodejs.cn/api/addons.html】调用本地库
全局安装node-gyp:npm install -g node-gyp
安装运行环境可以有两种选择,个人更倾向第一种——
【选择一】
添加powershell所在的目录到系统环境变量,比如C:\Windows\System32\WindowsPowerShell\v1.0,重启系统生效
用管理员模式打开cmd,执行命令npm install --global --production windows-build-tools安装C++运行环境
【选择二】
如果不使用windows-build-tools的话,也可以单独安装: Visual Studio Build Tools (选择 "Visual C++ build tools" workload) 或者 Visual Studio 2017 Community (选择 "Desktop development with C++" workload)
官方安装指南在:https://github.com/nodejs/node-gyp#installation
5. 编译C++模块
切换到模块目录,使用命令编译生成node文件:
node-gyp configure --target=9.0.3 --arch=ia32 --dist-url=https://atom.io/download/atom-shell
node-gyp build --target=9.0.3 --arch=ia32
这里target指对应的electron版本号,如果这里选择不对,即使编译过了,执行的时候会出现经典的VERSION不一致问题。
6. Electron-builder打包
全局安装electron-builder:cnpm install electron-builder -g
提前下载好依赖包并放到预定目录:
electron-v9.0.3-win32-ia32.zip
- 下载路径:https://npm.taobao.org/mirrors/electron/9.0.3/
- 放置目录C:\Users\*****\AppData\Local\electron\Cache;
SHASUMS256.txt【需要重新命名为SHASUMS256.txt-9.0.3】
- 下载路径:https://npm.taobao.org/mirrors/electron/9.0.3/
- 放置目录C:\Users\*****\AppData\Local\electron\Cache;
winCodeSign
- 下载路径:https://github.com/electron-userland/electron-builder-binaries/archive/winCodeSign-2.6.0.zip【注意包中包含了很多内容,只需要压缩包中的winCodeSign文件夹】
- 放置目录C:\Users\*****\AppData\Local\electron-builder\cache\winCodeSign【没有就创建,文件夹命名为winCodeSign-2.6.0】
nsis
- 下载路径:https://github.com/electron-userland/electron-builder-binaries/archive/nsis-3.0.3.2.zip【也可以不用下,winCodeSign包中已经包含了nsis,把文件夹拉出来就行】
- 放置目录C:\Users\*****\AppData\Local\electron-builder\cache\nsis【没有就创建,文件夹命名为nsis-3.0.3.2】
nsis-resources
- 下载路径:可以不用下,winCodeSign包中已经包含了nsis-resources,把文件夹拉出来就行
- 放置目录C:\Users\*****\AppData\Local\electron-builder\cache\nsis【没有就创建,文件夹命名为nsis-resources-3.0.3.2】
========================================
electron .
electron-builder
虽然中间过程很曲折,结果很完美~~