electron越来越流行, github也用起来写了个client, 之前写过用md做presentation的东西, 现在考虑结合一下试试做个md工具再加上博客发布功能等应用.

electron应用的优点:

  • 一份代码发布到三个平台
  • 作为web开发不用兼容低版本和浏览器内核差异

之前跟着electron官网的例子和electron-packer运行有过失败的经验, 这次看着另外个项目来尝试. 前半部分介绍一下各个功能需要的依赖和运行方式.

common的vue和es6构建

作为vue的项目, 在dependencies中添加vue和vuex, devDependencies中依赖webpack及一系列相关的loader.

在拉取eme代码的时候频频报错, 在webpack和各种loader的时代已经无法坚持使用npm了, yarn其实只是作为npm的一个封装吧, 实际也是拉了npm的代码仓库. 命令也很简单.

npm yarn
npm i yarn
npm i -S yarn add
npm i -D yarn add -D

electron应用启动

electron有一个主进程, 需要在package.json的main字段中声明主进程. 十几行代码就可以启动electron应用了. 具体electron的api简介会在下一章讨论.

开发环境

开发环境在package.json中不需要配置, electron开发者在全局安装即可本地运行.

1
npm i -g electron

electron运行的时候commond + r就可以刷新, 配合webpack的—watch参数即可.

build与发布

在devDependencies添加electron-prebuilt

官方推荐了两个发布类, 因为在文章开头提到的失败, 这次选用了electron-builder来构建, 操作非常简单.

  1. 在package.json中配置build字段
  2. 在package.json的scripts字段中配置命令build
  3. 在package.json中添加字段postinstall值为install-app-deps
  4. 在项目下建build文件夹存放windows和mac的icon, 和mac安装时的背景.

我是这么写的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
  "scripts": {
    "postinstall": "install-app-deps",
    "dist": "npm run mac && npm run linux && npm run win",
    "mac": "build --mac",
    "linux": "build --linux deb tar.xz",
    "win": "build --win --ia32",
    "dev": "webpack --config webpack/webpack.config.js --progress --watch & electron app"
  },
    "build": {
    "appId": "com.yo-cwj.yohane-client",
    "mac": {
      "category": "public.app-category.utilities"
    },
    "win": {
      "target": [
        "squirrel"
      ]
    }
  }
}

脚手架工具

到这里, 一个空的应用架子已经完成60%并可以运行了. 搞笑的是在文档里看到了starter. 觉得都白做了.