前言
electron基本知识
使用中遇到的问题:
为什么 electron是用 module.exports 导出的 但是在主进程 ts文件中 可以用 import去引用electron?
引入electron
在 Electron 的主进程(Main Process)中,通常使用 TypeScript 编写时,可以使用 import
语法来引入 Electron 的模块,而不需要使用 require
。这里涉及到几个重要的技术细节和历史背景:
-
Node.js 模块系统:
- Electron 主进程运行在 Node.js 环境中,而 Node.js 从版本 12 开始正式支持 ECMAScript 模块(ES Modules)。这意味着在 Node.js 主进程中,你可以使用
import
和export
语法来加载和导出模块,而不一定需要使用传统的module.exports
和require
。
- Electron 主进程运行在 Node.js 环境中,而 Node.js 从版本 12 开始正式支持 ECMAScript 模块(ES Modules)。这意味着在 Node.js 主进程中,你可以使用
-
TypeScript 支持:
- TypeScript 是 JavaScript 的一个超集,它支持编译为多种不同版本的 JavaScript。TypeScript 也兼容 ES Modules 的语法,因此你可以在 TypeScript 中使用
import
来加载模块,这样更符合现代 JavaScript 的开发实践。
- TypeScript 是 JavaScript 的一个超集,它支持编译为多种不同版本的 JavaScript。TypeScript 也兼容 ES Modules 的语法,因此你可以在 TypeScript 中使用
假设你有一个使用 module.exports
导出的 CommonJS 模块(commonJsModule.js
):
在 TypeScript 中,你可以使用 require
的类型(通常是 import * as
)来导入这个模块:
实际上 tsc编译后变成:
-
Electron 主进程中的模块加载:
- 当你在 Electron 的主进程中编写 TypeScript 代码时,你可以直接使用
import
语法来引入 Electron 的模块,例如import { ipcMain } from 'electron';
。这是因为 Electron 主进程本质上是运行在 Node.js 环境中,Node.js 可以直接支持这种模块加载方式。
- 当你在 Electron 的主进程中编写 TypeScript 代码时,你可以直接使用
-
渲染进程与主进程的区别:
- 在 Electron 的渲染进程中,通常运行在浏览器环境中,为了与 Node.js 的模块系统和浏览器环境的安全性模型兼容,需要使用
require('electron').remote
来间接访问主进程的 Electron 模块。
- 在 Electron 的渲染进程中,通常运行在浏览器环境中,为了与 Node.js 的模块系统和浏览器环境的安全性模型兼容,需要使用
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 开发的趋势和语法。
取消菜单栏:
asar
Electron 的 asar
(Archive)是一种将多个文件和目录打包成一个单一文件的归档格式,专为 Electron 应用设计。它类似于一个压缩包,但具有特殊的设计以便于 Electron 能够直接从这样的归档文件中加载资源,而无需先解压。使用 asar
的主要好处包括:
- 性能优化:通过减少文件系统的 I/O 操作,提高应用的加载速度。因为 Electron 可以直接从单个
asar
文件中读取资源,而不需要遍历多个小文件。 - 保护源代码:将应用的源代码和资源打包进一个不可直接浏览的归档文件中,增加了一层保护,使得最终用户更难以直接查看或修改应用内部的文件结构和源代码。
- 简化部署:一个
asar
包代替了原来的多个文件和目录,使得应用的分发和更新过程更加简便。
electron打包
electron 的打包可以采用electron-packager及electron-builder两种方式实现,经过对比之后发现electron-builder有比electron-packager有更丰富的的功能,支持更多的平台,同时也支持了自动更新。除了这几点之外,由electron-builder打出的包更为轻量,并且可以打包出不暴露源码的setup安装程序,所以将方案选为后者。
electron初始化获取目录的区别
import {app} from 'electron'
__dirname
和process.cwd()
和 app.getAppPath()
const path = require('path')
path.join
和 resolve