Electron开发环境搭建

1.简介

Electron 是由 Github 开发的开源框架

它允许开发者使用 Web 技术构建跨平台的桌面应用

Electron = Chromium + Node.js + Native API

1. Chromium : 为Electron提供了强大的UI能力，可以不考虑兼容性的情况下，利用强大的Web生态来开发界面。
2. Node.js ：让Electron有了底层的操作能力，比如文件的读写，甚至是集成C++等等操作，并可以使用大量开源的npm包来完成开发需求。
3. Native API ： Native API让Electron有了跨平台和桌面端的原生能力，比如说它有统一的原生界面，窗口、托盘这些。

开发文档：https://www.electronjs.org/docs

2.yarn依赖包

yarn作为依赖包管理工具.yarn由Facebook的工程师开发的,相对于NOde.js自带的npm包管理工具来说,它具有速度更快,使用更简捷,操作干安全的特点.

安装命令:

npm install -g 

 

3.创建Electron应用

3.1 新建一个目录,在此目录下打开命令行,创建一个Node.js项目

yarn init

该命令执行完成后,会有一系列提示,要求用户输入项目名称,项目版本,作者等信息.可以采用默认设置,直接按回车键即可.

项目创建完之后,该目录下生成一个package.json文件.此文件为该项目的配置文件.

{
    "name": "chapterl",
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT"
}

3.2安装Electron依赖包

在编写代码之前,需要先安装ELection依赖包,它大概有50~70MB(实际上是一个精简版的Chromium浏览器),并且默认的是从GitHub下载的,下载地址是 https://github.com/electron/electron/releases(文件实际上存放在Amazon的AWS服务器上,须经有GitHub域名跳转).对于中国用户来说,下载速度很慢,大部分时候都无法安装成功.\

好在阿里巴巴的工程师在国内搭建了Electron的镜像网站: https://npm.tapbao.org/mirrors/electron/(注意,此地址与下方命令行中的地址不同).

我们可以通过如下指令配置Electron的镜像网站.

yarn config set ELECTRON_MIRROR https://cdn.npm.taobao.org/dist/electron/

环境变量设置好之后,再在命令行执行如下命令,以安装Electron:

yarn add electron --dev --platform=win64

--dev声明安装的electron模块只用于开发.

--platform=win64 标记着我们只安装了64位版本的Electron

稍微等待几秒钟,electron模块就安装好了,安装完成后,package.json增加了如下配置节:

"devDependencies": {"electron": "^8.1.0"}

这说明我们安装的是Electron最新稳定版本8.1.0(Electron版本发布很频繁,使用的时候可能就不是这个版本了).

3.3安装后的错误提示

如果yarn提示安装成功,但稍后执行启动程序的命令时收到如下错误信息:

 Electron failed to install correctly, pleasee delect node_modules/electron and try installing again

这说明Electron还是没有安装成功,这时可以打开[your_project-path]\node_modules\electron 目录,创建一个path.txt文本文件,输入以下内容:

electron.exe

Mac系统下,同样也是创建path.txt,但其内容为:

Electron.app/Contents/MacOS/Electron

然后自己手动从阿里巴巴的镜像网站下载相应版本的Electron的压缩包,解压到此目录: [your-project-path]\node_modules\electron\dist, 在执行命令即可正常运行了.

3.4使用Electron依赖包

为了使用Electron依赖包,我们需要在package.json 中添加一个scripts配置节,代码如下:

"scripts": {"start": "electron ./index.js"}

----scripts 配置节允许我们为当前项目设置一组自定义脚本

----start 脚本代表我们要是用ELectron启动本项目.

4.启动项目

yarn start