当我们谈论electron桌面端时,我们在谈论什么?

314 阅读4分钟

前言

electron基本知识

使用中遇到的问题:

为什么 electron是用 module.exports 导出的 但是在主进程 ts文件中 可以用 import去引用electron?

image.png

引入electron

image.png

在 Electron 的主进程(Main Process)中,通常使用 TypeScript 编写时,可以使用 import 语法来引入 Electron 的模块,而不需要使用 require。这里涉及到几个重要的技术细节和历史背景:

  1. Node.js 模块系统

    • Electron 主进程运行在 Node.js 环境中,而 Node.js 从版本 12 开始正式支持 ECMAScript 模块(ES Modules)。这意味着在 Node.js 主进程中,你可以使用 import 和 export 语法来加载和导出模块,而不一定需要使用传统的 module.exports 和 require
  2. TypeScript 支持

    • TypeScript 是 JavaScript 的一个超集,它支持编译为多种不同版本的 JavaScript。TypeScript 也兼容 ES Modules 的语法,因此你可以在 TypeScript 中使用 import 来加载模块,这样更符合现代 JavaScript 的开发实践。

假设你有一个使用 module.exports 导出的 CommonJS 模块(commonJsModule.js):

image.png

在 TypeScript 中,你可以使用 require 的类型(通常是 import * as)来导入这个模块:

image.png

实际上 tsc编译后变成:

image.png

  1. Electron 主进程中的模块加载

    • 当你在 Electron 的主进程中编写 TypeScript 代码时,你可以直接使用 import 语法来引入 Electron 的模块,例如 import { ipcMain } from 'electron';。这是因为 Electron 主进程本质上是运行在 Node.js 环境中,Node.js 可以直接支持这种模块加载方式。
  2. 渲染进程与主进程的区别

    • 在 Electron 的渲染进程中,通常运行在浏览器环境中,为了与 Node.js 的模块系统和浏览器环境的安全性模型兼容,需要使用 require('electron').remote 来间接访问主进程的 Electron 模块。

ps:contextIsolation:false (渲染进程访问主进程的代码)

在Electron中,contextIsolation 是一个在 BrowserWindow 的 WebPreferences 选项中用来控制是否将 Electron 的主进程与渲染进程隔离开的属性。如果设置为 false,它会禁用上下文隔离,让渲染进程可以使用 Electron 的 preload 脚本中的所有模块,并且渲染进程将能够访问主进程的 Node.js 全局,如 require() 函数和 process 对象。

当你看到 contextIsolation: false 时,它可能是在配置 BrowserWindow 时的一部分,例如:

new BrowserWindow({
  webPreferences: {
    contextIsolation: false,
    // 其他 WebPreferences 选项
  }
});

如果你需要在渲染进程中使用主进程的模块或全局变量,你可以通过设置 contextIsolation 为 false 来实现。

警告:禁用上下文隔离可能会增加渲染进程被恶意代码操作的风险,因为它允许渲染进程访问主进程的代码,所以在设置 contextIsolation 为 false 时请务必确保你的应用安全。

nodeIntegration:true

允许html页面上的javascipt代码访问nodejs 环境api代码的能力(与node集成的意思)

总结来说,主进程可以使用 import 来引入 Electron 模块,因为它直接运行在 Node.js 环境中,而 Node.js 已经原生支持了 ES Modules。这种做法也更加符合现代 JavaScript 开发的趋势和语法。

取消菜单栏:

image.png

asar

Electron 的 asar(Archive)是一种将多个文件和目录打包成一个单一文件的归档格式,专为 Electron 应用设计。它类似于一个压缩包,但具有特殊的设计以便于 Electron 能够直接从这样的归档文件中加载资源,而无需先解压。使用 asar 的主要好处包括:

  1. 性能优化:通过减少文件系统的 I/O 操作,提高应用的加载速度。因为 Electron 可以直接从单个 asar 文件中读取资源,而不需要遍历多个小文件。
  2. 保护源代码:将应用的源代码和资源打包进一个不可直接浏览的归档文件中,增加了一层保护,使得最终用户更难以直接查看或修改应用内部的文件结构和源代码。
  3. 简化部署:一个 asar 包代替了原来的多个文件和目录,使得应用的分发和更新过程更加简便。

electron打包

electron 的打包可以采用electron-packager及electron-builder两种方式实现,经过对比之后发现electron-builder有比electron-packager有更丰富的的功能,支持更多的平台,同时也支持了自动更新。除了这几点之外,由electron-builder打出的包更为轻量,并且可以打包出不暴露源码的setup安装程序,所以将方案选为后者。

image.png

electron初始化获取目录的区别

import {app} from 'electron'

__dirnameprocess.cwd()app.getAppPath()

const path = require('path')

path.joinresolve