Electron简介

作者: ayusong870 | 来源:发表于2020-04-29 10:57 被阅读0次

Electron入门-本地环境搭建
electron开发入门（一）Hello world程序
Electron 简介
Electron简介
Electron简介
electron简介
Electron 简介
electron -- 简介
Electron 简介
Electron

Electron（最初名为Atom Shell[3]）是GitHub开发的一个开源框架。它允许使用Node.js（作为后端）和Chromium（作为前端）完成桌面GUI应用程序的开发。Electron现已被多个开源Web应用程序用于前端与后端的开发，著名项目包括GitHub的Atom和微软的Visual Studio Code。

1. 环境配置

Electron配置

# 克隆示例项目的仓库
$ git clone [https://github.com/electron/electron-quick-start](https://github.com/electron/electron-quick-start)
# 进入这个仓库
$ cd electron-quick-start
# 安装依赖并运行
$ npm install && npm start

或者下载最新的electron-api-demos或者electron-quick-start，解压后进入目录

# 进入样例目录

$cd electron-api-demos 或者 cd electron-quick-start

# 安装依赖并运行

$ npm install

$  npm start

#（官方建议使用如下命令，可以在不同的app中使用不同的electron版本）

$ npm install --save-dev electron

PS：由于外国站定总是卡的很，甚至无法连接，可以选择淘宝的。

npm install cnpm -g --registry=http://registry.npm.taobao.org 
cnpm install --save-dev electron

再PS：遇到问题不识别cnpm。。。注意配置环境变量

可以使用Visual Studio Code导入工程

Electron-api-demos

Electron-quick-start

2. 打包

打包为asar，安装asar

$ npm install -g asar

将项目打包为asar文件，进入项目electron-api-demos的上一级目录执行：

$ asar pack electron-api-demos app.asar

打包为EXE，在工程中的package.json文件里定义了打包的参数：

"package": "electron-packager . Hello --platform=win32 --arch=x64 --icon=app.ico --out=./out --asar --app-version=0.0.1",

2.1. Electron-packager

Electron-packager 是打包工具，如果未安装可以使用如下命令安装：

$ npm install electron-packager -g

第二个 “.”表示当前目录，如果在当前目录下的APP子目录那么就写./APP；
第三个参数是应用的名称
--platform表示平台的类型：win32是windows系统；
--arch设置是32位处理器还是64位;
--icon设置图标
--out设置输出路径
--asar（不知道干啥的）
--app-version设置应用程序版本
在工程目录下运行下面命令打包应用程序为EXE可执行文件

$ npm run-script package

2.2. electron-builder

Electron-builder用起来要比packager方便，而且打包的更好，更小。
首先来看看什么是electron-builder，来自官方的解释：

A complete solution to package and build a ready for distribution Electron, Proton Native or Muon app for macOS, Windows and Linux with “auto update” support out of the box.

简单的说，electron-builder就是有比electron-packager有更丰富的的功能，支持更多的平台，同时也支持了自动更新。除了这几点之外，由electron-builder打出的包更为轻量，并且可以打包出不暴露源码的setup安装程序。考虑到以上几点，我果断选择了electron-builder。

首先，依旧是安装依赖。 （这里官方强烈推荐使用yarn安装依赖包，但我使用了npm安装的依赖也可以正常打包，所以至于为什么官方强烈推荐用yarn，我还没搞懂其原因，还请了解缘由的大佬们赐教）

yarn add electron-builder

在package.json中做如下配置

"build": {
    "appId": "com.xxx.app",
    "mac": {
      "target": ["dmg","zip"]
    },
    "win": {
      "target": ["nsis","zip"]
    }
},"scripts": {
    "dist": "electron-builder --win --x64"
},

在命令行中执行npm run dist ，执行结果如下：