使用electron构建跨平台Node.js桌面应用

1. 前言

很久没有玩electron，工作中又不上，只能自己默默搞搞，那么今天来看一下，如何构建一个基本的electron桌面应用

2. 如何使用electron把基本的开发环境给跑起来

首先，electron官方提供了一个名为“electron-quick-start”的示例项目，地址为：https://github.com/electron/electron-quick-start

把资源搞下来，如果你是下载Zip包解压的，则资源默认都会放在一个名为“electron-quick-start-master”的文件夹中，把“electron-quick-start-master”改成你项目的名字，当然你不改也没关系。

克隆git仓储

# Clone this repository
git clone https://github.com/electron/electron-quick-start

切换到项目根目录

# Go into the repository
cd electron-quick-start

通过npm安装

# Install dependencies
npm install

启动程序

# Run the app
npm start

环境就这么跑起来了。Ctrl + R就可以刷新。

一旦环境跑起来，接下来的工作就跟做一个网页几乎就没什么区别，加载点CSS，图片，JS什么的，就可以了。因为本质上，electron就是给你搞了一个Chrome浏览器的壳子，只是比传统网页多了一个访问桌面文件的功能。

当然，具体操作并不可能像嘴皮子动的那么简单，前期还是需要了解一些基础知识。

index.html是打开的窗口加载的页面，可以看成是入口页面，就是一个普通的静态页面，没什么特殊的。

renderer.js默认里面就一堆注释，用来放业务相关JS的，和网页JS的区别在于，这里的JS不仅可以访问DOM，还能使用Node.js所有的API。能前能后，想怎么玩都行。

main.js 用于创建窗口和处理系统时间。

3. electron开发好的应用该如何发布

electron桌面在自己的开发环境下跑起来了，跑通了，如让其他小伙伴也能方便快捷地使用呢？我们的目标是windows系统下直接点击个.exe文件，Mac OS X直接点击.app文件就可以跑起来

我们需要使用专门的打包工具，我是使用的electron-packager，首先全局安装一下：

npm install electron-packager -g

然后就可以执行打包了，例如：

electron-packager . point --out ../electron

这段语句表示的意思是把当前文件目录下的资源（.）命名为point打包到父级的electron文件夹。

此时electron-packager就会自动判别当前的操作系统打包对应的文件，例如windows系统下就会打包成.exe格式。

运行里面的.exe即可启动应用

如果你想一次性把所有的操作系统都打包一遍，可以在上面打包语句后面加上-all。

由于打包的时候会把浏览器内核完整打包进去，所以就算你的项目开发就几百k的资源，但最终的打包文件估计有40到50M。

3. electron发布好的桌面应用如何有效升级？

我们平常的桌面软件要升级的话，一般都需要下载完整的安装包。electron作为桌面应用，似乎也逃脱不了这种宿命，但实际上，在绝大部分场景下，我们根本就无需要下载完整的安装包，因为electron-packager打包的其实是浏览器内核和主线程控制脚本，具体的业务代码全部都是独立在app文件夹下的，也就是说，只要我们的桌面应用主线程逻辑不变，什么UI样式调整，什么交互效果改变，什么业务逻辑变更，我们都只要更新app文件夹下的这资源就可以了。当然，我们的桌面应用可以做成自动检测是否有版本更新以及在线升级，升级的内容就是CSS，HTML，image或者JS这些静态资源。

4. 结束语

有了electron，理论上所有基于的Node.js的工具都可以桌面化，例如，小图标合并，图片压缩等等。后续将制作实用小工具发布在http://works.lishuaishuai.com/