参考并扩展自

Creating a markdown app with Electron and React

简介

Electron是一个使用js来开发跨平台桌面端软件的一个框架。
比较著名的产品包括：

1. VS code
2. skype
3. atom
4. 钉钉
5. SwitchHosts!

重点

1. electron的原理是把chromium的v8引擎和node的运行时结合到了一起。
2. 架构还是前后端分离
3. 前端按照web开发的方式正常开发
4. 通信原理：每一个前端窗口是一个进程，后端单独是一个进程。electron提供前后端进程间通信的接口。

开发流程

前提条件

有一个可以跑通的web项目，比如用create-react-app创建的项目。

安装electron

npm install electron --save-dev
在package.json的script中添加
"electron-start": "electron ."
在package.json的顶层添加
"main": "public/main.js"
此时的package.json看起来是这样的

{
  "name": "mook",
  "version": "0.1.0",
  "main": "public/main.js",
  "private": true,
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-scripts": "1.0.13"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "electron-start": "electron ."
  },
  "devDependencies": {
    "electron": "^1.7.6"
  }
}

main.js文件是后端主进程的执行入口，内容如下：

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({width: 900, height: 680});
  mainWindow.loadURL('http://localhost:3000');

  app.setAboutPanelOptions({
    applicationName: "Mook",
    applicationVersion: "0.0.1",
  })

  mainWindow.on('closed', () => mainWindow = null);
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow();
  }
});

其中mainWindow.loadURL('http://localhost:3000');这行为加载的前端页面的地址。
此时，先执行npm run start启动前端页面，再执行npm run electron-start启动electron。

简化开发启动

每次启动都需要执行两个命令，比较麻烦，因此，可以通过安装几个包来解决这个问题。
npm install wait-on concurrently --save-dev
然后再package.json文件的script中添加
"electron-dev": "concurrently \"npm start\" \"wait-on http://localhost:8080 && electron .\"",
这样，就可以通过执行npm run electron-dev一个命令启动了。

创建打包脚本

1. 首先需要安装打包工具
   npm install electron-builder --save-dev
2. 添加打包配置
   然后再package.json文件的script中添加
   "preelectron-pack": "npm run build"
   以及
   "electron-pack": "build -c.extraMetadata.main=build/main.js"
preelectron-pack命令会在执行npm run electron-pack之前自动执行，也就是会先打包前端的代码，生成一个html文件。
   需要注意的是，build/main.js就是刚刚package.json文件中的public/main.js。只不过在打包前端代码的时候一并打包入了build目录中。如果你用的不是create-react-app，那么需要注意把这个文件一起打包进去。
   在package.json中，需要增加一个build块和homepage属性，build用来告诉electron-pack如何打包，而homepage则指明了js和css文件的位置。配置如下：

"homepage": "./",
"build": {
  "appId": "com.mook",
  "files": [
    "build/**/*",
    "node_modules/**/*"
  ],
  "directories": {
    "buildResources": "assets"
  }
}

3. 修改main.js
   之前的main.js是加载了http://localhost:3000的方式进行的。打包后不能继续使用这种方法。需要安装一个包
   npm install electron-is-dev --save
   这个包用来判断当前执行的环境。
   之后修改public/main.js

const isDev = require('electron-is-dev');
const path = require('path');

将原来的

mainWindow.loadURL('http://localhost:3000');

改为

mainWindow.loadURL(isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '../build/index.html')}`);

4. 打包
   执行npm run electron-pack就会生成dmg文件。

至此整个项目的架子基本就已经搭完了。

前后端通信

electron提供了ipcMain和ipcRenderer两个类进行通信。
前端发送请求

const {ipcRenderer} = window.require('electron')
ipcRenderer.send(channel, data)

其中 channel可以理解为调用的方法名，需要后端对该方法进行监听。
后端接受请求

const { ipcMain } = electron
ipcMain.on(channel, (event, arg) => {
  # do something here  
})

反过来
后端发送请求

mainWindow.webContents.send(channel, data)

其中mainWindow为项目启动时创建的窗口，如果创建了多个窗口，可以向指定的窗口发送请求。
前端监听请求

const {ipcRenderer} = window.require('electron')
ipcRenderer.on(channel, (event, arg) => {
  # do something here
})

小结

以上是开发工程中遇到的比较费时间的一些事情的整理。electron用来开发一些小工具还是一个不错的选择。