Electron

[TopGrd]

Api

demopark/electron-api-demos-Zh_CN

ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/ npm i electron

架构

主进程和渲染器进程

运行package.json的main脚本的进程被称为 主进程,一个 Electron 应用总是有且只有一个主进程
使用了Chromium 来展示 web 页面，Chromium 的多进程架构也被使用到。每个 Electron 中的 web 页面运行在它自己的渲染进程中。

rebuild native-module

使用的包包含 C++ 的原生实现。所以在 pack 前需先用 electron-rebuild 做 rebuild。

rebuild 如果很慢，可能是要翻墙，可尝试 cnpmjs.org 提供的镜像，electron-rebuild -d=https://gh-contractor-zcbenz.cnpmjs.org/atom-shell/dist/。
GitHub - electron/electron-rebuild: Package to rebuild native Node.js modules against the currently installed Electron version

在渲染进程中使用主进程模块

使用remote api, 在主进程中导出模块, remote | Electron

// main services
const pty = require('node-pty')
module.exports = { pty }
// main index.js
const services = require('./services')
global.services = services
// renderer services
import { remote } from ‘electron’
const services = remote.getGlobal(‘services’)
export default services
// renderer app.js
import services from './services'

另一种方式是Ipc通信

electron 中模拟终端

https://github.com/xtermjs/xterm.jsnode-pty/renderer.js at master

Microsoft/node-pty · GitHub

监听进程崩溃

mainWindow.webContents.on('crashed', () => {
    const options = {
      type: 'info',
      title: '进程崩溃',
      message: '这个进程崩溃了',
      buttons: ['重载', '退出'],
    }

    dialog.showMessageBox(options, (index) => {
      if (index === 0) mainWindow.reload()
      else mainWindow.close()
    })
})

renderer进程与main进程通信

使用ipc通信

const mainWin = createWindow()
global.windows = {}
global.windows.home = mainWin
mainWin.webContent.send('custom-evt', data)

// renderer
import { ipcRenderer } from electron
ipcRender.on('custom-evt', data => {
	console.log(data)
})

Debug

使用vscode使用attach方式debug

electron index.dev.js —inspect=5858

{
  // 使用 IntelliSense 了解相关属性。
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Attach",
      "port": 5858,
      "address": "localhost"
    }
  ]
}

Electron npm script

# electron-npm script
export npm_config_target=1.7.10 # Electron's version. Find with ./node_modules/.bin/electron -v
export npm_config_arch=x64 # The architecture.
export npm_config_runtime=electron # Tell node-pre-gyp we are building for Electron.
export npm_config_build_from_source=true # Tell node-pre-gyp to build module from source code.
npm install $1 # Replace with the first argument passed.

Error: Electron failed to install correctly, please delete node_modules/electron and try installing again · Issue #8466 · electron/electron

Security, Native Capabilities, and Your Responsibility | Electron

其它

Electron 应用实战 (架构篇) · Issue #13 · sorrycc/blog · GitHub

GitHub - electron-userland/electron-builder: A complete solution to package and build a ready for distribution Electron app with “auto update” support out of the box 基于electron-packager

GitHub - electron/electron-rebuild: Package to rebuild native Node.js modules against the currently installed Electron version