使用 Electron 开发桌面应用

先挖个坑,介绍 Electron 开发。目前只有打包部分的知识,也是我多日踩坑得来。

这个标题比较大,先挖个坑,日后再填。

忘记哪里看来的:nw(原 node-webkit)的作者从 Intel 离职后,无法继续维护 nw,此时 Github 向他抛来橄榄枝,请他去做 Electron(主要是为 Atom 做基础),于是便有了 Electron。

这两个东西虽然基础架构不一样,不过大体上都是 V8 + Chromium,实现使用 JavaScript 构建系统交互,使用 Web 提供 UI。简单对比了一下我觉得明显 Electron 好多了嘛,所以选择用它来开发桌面应用。

经过几天摸索,开发出来一个应用。不过太小,可分享的东西不多,所以先记几条 Tips。

封装 Electron 应用

打包工具

Electron 构建了一套完整的环境,只需要替换里面的 Web 部分就可以发布。这样最大的好处是每次发布的时候只需要简单压缩一下网页部分,放到包里,不用构建整套系统,对开发机的要求大大降低。

坏处就是,对于我们墙内用户而言,安装 Electron 必须用小水管拉一个将近 100M 的包回来,简直痛苦的要死。更别提后面如果享用 [electron-packager] 之类的工具封装的话还要再下一遍……每到这个时候,都要给病魔加油,愿他早日战胜方校长。

这里建议使用淘宝的 cnpm 镜像,速度会好很多。不过它似乎和 npm 有点冲突。

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

至于 electron-packager,因为它使用 [electron-download] 下载 Electron 运行包,可以按照提示,修改下载的源,走淘宝镜像,这样也会快很多:

npm config set ELECTRON_MIRROR https://npm.taobao.org/mirrors/electron/

环境选择

至少在我这里,在 Mac 下只能打包 Mac 应用;在 Windows 下只能打包 Windows 应用。所以需要多平台的话,请准备多台开发机。

npm start, npm stop

使用 npm 启动和停止应用。

使用 npm 可以直接调用 package.json 里面 scripts 标签里定义的脚本。比如,Astinus 项目中,index.js 是入口JS,并且需要 ES6 支持,就可以这样:

    // package.json
    {
      "scripts": {
        “start": "node index --harmony"
      }
    }

然后直接运行

    npm start

即可。

那么怎么终止进程呢?

首先要在 index.js 里增加一句

    process.title = 'astinus';

声明该应用的标题是“astinus”,然后增加脚本:

    {
      "scripts": {
        "start": "node index --harmony",
        "stop": "killall SIGINT astinus"
      }
    }

之后就可以

    npm stop

参考: