当我们谈论electron桌面端时，我们在谈论什么？

demon陈少
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'

__dirname 和process.cwd()和 app.getAppPath()

const path = require('path')

path.join 和 resolve

avatar
文章
阅读
粉丝