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

最近，把团队内常用的一个基于Node.js制做的小工具给作成了可视化操做的桌面软件，使用的是electron，这里简单分享一下使用electron的一些经验和心得。

 

1、如何使用electron把基本的开发环境给跑起来？

我是这么处理的，electron官方提供了一个名为“electron-quick-start”的示例项目，地址为：https://github.com/electron/electron-quick-start

而后把相关资源给弄下来，若是你是下载Zip包解压的，则资源默认都会放在一个名为“electron-quick-start-master”的文件夹中，把“electron-quick-start-master”改为你项目的名字，固然你不改也不要紧，就怕过段时间忘记，而后小手一抖，当作普通资源给删掉了，到时候就男默女泪了。

而后安装：

npm install

因为安装包比较大，因此-\/要转好几分钟才能装好。若是安装不顺利，试试换成使用淘宝NPM镜像：

npm install -g cnpm --registry=https://registry.npm.taobao.org

而后再这么安装：

cnpm install

而后启动：

npm start

而后就会出现这样的框框：

环境就这么跑起来了。

Ctrl + R就能够刷新。

2、electron开发该怎么入手？

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

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

咱们能够重点关注一下上一节安装好的开发环境的一些资源文件，主要是index.html, main.js和renderer.js，以下图：

 

在我看来，若是咱们要开发的桌面应用只要不像QQ软件那样复杂，其实能够彻底不用管main.js，main.js的做用就是用来显示npm start后出现的那个窗口的，而咱们的工做只是窗口里面内容，所以，main.js无需关心。

index.html是打开的窗口加载的页面，能够当作是入口页面，就是一个普通的静态页面啊，没什么特殊的。

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

因此，咱们的工做思路就很清晰了：

 

先把咱们桌面应用的可视窗口界面给弄出来，这个就须要使用CSS和HTML代码了。相比网页开发而言，开发桌面应用要更轻松，由于根本不要考虑兼容性的问题，并且不少最新的chrome特性，均可以也很愉快的玩起来。咱们的CSS代码能够外链线上的资源，也能够放到本地，也能够直接内联在页面中，很是自由，很是随意啊，均可以。我我的建议是放在本地的，由于就算断网了咱们的桌面应用也能正常使用。

假设一番折腾，咱们的界面弄好了，相似这样：

 

 

 

1. 接下来就是折腾交互了。

2. 交互效果开发和传统web网站同样，很自由，你喜欢jQuery，就用jQuery，你喜欢Vue，也可使用Vue等等，没有什么顾虑，就是干！

   例如我给团队作的这个桌面应用就是用的jQuery，最后应用跑得很畅快。

3. 借助Node.js API或者其余第三方的npm工具或者electron API开发咱们的应用。

   例如，引入Node.js API：

   const fs = require('fs');
   stat = fs.stat;
   
   const path = require('path');
   const url = require('url');

   引入第三方库：

   const minify = require('html-minifier').minify;

   等等。

   例如我作这个桌面应用有须要选择本地文件夹的功能，这个时候就须要借助electron API，因为咱们的业务JS都是写在renderer.js中的，并不是主线程，所以，调用的使用要使用remote，例如：

   const electron = require('electron');
   
   const dialog = electron.remote.dialog;

   此时，咱们想要点击按钮打开系统的选择文件夹弹框就能够这么处理：

   dialog.showOpenDialog({
       properties: ['openDirectory', 'createDirectory']
   }, callback);

   具体可参考electron API文档，有中文版。

因而，简简单单的三步曲，咱们的桌面应用功能就开发好了，逻辑仍是之前Node.js工具的逻辑，多的仅仅是可视化的界面，以及参数是从输入框等表单控件获取。

开发的过程要比以前预估的要轻松得多，那种随便怎么玩都支持的感受真的很美妙。

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

electron桌面在本身的开发环境下跑起来了，跑通了，如让其余小伙伴也能方便快捷地使用呢？咱们的目标是windows系统下直接点击个.exe文件，Mac OS X直接点击.app文件就能够跑起来，咱们的小伙伴无需再麻烦安装一堆node modules。

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

npm install electron-packager -g

而后就能够执行打包了，例如：

electron-packager . bobo --out ../electron

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

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

若是你想一次性把全部的操做系统都打包一遍，能够在上面打包语句后面加上-all。

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

而后有一点须要特别注意一下，若是你开发的桌面要有第三方的npm模块依赖，则你打包好的运行文件不管是跑不起来的，有打包的时候并不会把第三方的npm模块依赖也打不进去，须要本身手动复制进去。个人作法是把第三方依赖的npm模块打包成一个名为require-node_modules.zip文件夹，此时这个文件会一块儿被打包带走，一同被放在app文件夹下，具体路径为：

windows：\resources\app
OS X：显示包内容 → \Contents\Resources\app

此时，只要直接解压就可使用了。

补充于翌日
感谢@小小瘦杜的纠正，实际上，是能够直接打包第三方的npm模块的，就是安装依赖的时候不要--save-dev。

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

咱们日常的桌面软件要升级的话，通常都须要下载完整的安装包。electron做为桌面应用，彷佛也逃脱不了这种宿命，但实际上，在绝大部分场景下，咱们根本就无须要下载完整的安装包，由于electron-packager打包的实际上是浏览器内核和主线程控制脚本，具体的业务代码所有都是独立在app文件夹下的，也就是说，只要咱们的桌面应用主线程逻辑不变，什么UI样式调整，什么交互效果改变，什么业务逻辑变动，咱们都只要更新app文件夹下的这资源就能够了：

windows：\resources\app
OS X：显示包内容 → \Contents\Resources\app

例如，咱们的renderer.js作了一些升级改动，此时咱们的小伙伴想要更新怎么办，无需再从新发布一个安装包，直接把app文件夹下renderer.js切换一下就行了，很是简单和快捷。

甚至若是有精力的话，咱们桌面应用能够作成自动检测是否有版本更新以及在线升级，升级的内容就是CSS，HTML，image或者JS这些静态资源。

 

5、结束语

有了electron，理论上全部基于的Node.js的工具均可以桌面化，例如，小图标合并啊，图片压缩呀等等。

并且从本文的描述来看，基本上没什么难度，其实你们均可以搞一搞，由于对于设计师和小白开发人员而言，他们仍是更喜欢使用可视化的东西，这其实对于提升团队效率仍是颇有帮助的，好比那个设计师作了一个图片压缩或者合成的可视化工具，人家天然是非常欢喜的。

好了，就这些，之后再想到什么遗漏的再补充上去。