Tauri vs. Electron：比较、操作方法和迁移指南

黄飞翮

2023-12-01

九年前，Electron 团队通过引入一个允许我们使用基本的 HTML、CSS 和 JavaScript 知识快速构建一个框架，彻底改变了我们创建桌面应用程序的方式。除非受到有效批评，否则 Electron 可以完成工作，我们已经看到许多公司都在使用它，包括 Slack、WhatsApp（桌面），甚至是开发人员社区最喜欢的文本编辑器 VS Code。然而，最近，Tauri 被引入作为 Electron 的替代品。

在本文中，我们将探索新的闪亮桌面应用程序框架 Tauri。我们将看看如何开始使用它，它是如何工作的，它与 Electron 的比较，以及将现有的 Electron 项目迁移到 Tauri 会是什么样子。

以下是我们将详细介绍的内容：

金牛座是什么？
- 金牛座如何运作
- 金牛座专业人士
- 金牛座的主要缺点
创建 Tauri 应用程序
从电子迁移

金牛座是什么？

Tauri 是一个相对较新的框架，它允许您利用基本的 Web 技术和 Rust 编程语言快速创建跨平台应用程序。

Tauri 基于 Rust 构建，设计安全且高性能，与任何前端框架兼容，并允许您为所有主要桌面平台创建可执行应用程序，包括 macOS、Windows 和 Linux 操作系统。

金牛座如何运作

每个 Tauri 应用程序都包含一个核心进程，作为应用程序的入口点，并且是唯一可以完全访问操作系统的组件。然而，核心进程并不呈现实际的应用程序界面；相反，它会启动使用操作系统提供的 WebView 库的子进程，从而可以使用 Web 技术构建 Tauri 应用程序。

与使用 Chromium 引擎而不考虑底层操作系统的 Electron 打包和呈现应用程序不同，Tauri 使用操作系统的 WebView 库。Tauri 方法的优点是 WebView 库不包含在最终的可执行文件中，而是在运行时动态链接，这大大降低了捆绑应用程序的大小和性能。

金牛座专业人士

如前所述，Tauri 应用程序由于其 webview 方法而比 Electron 应用程序轻得多。事实上，一个重量超过 52MB 的使用 Electron 构建的示例应用程序在使用 Tauri 构建时会轻得多，约为 3MB。

Tauri 框架的其他一些主要好处包括：

更好的性能：Tauri 应用在性能、启动时间和内存消耗方面也优于 Electron 应用
自我更新器：Tauri 包含一个自我更新器功能，您可以快速集成到您的应用程序中，而无需依赖任何第三方库
跨平台：当然，您可以为所有主要桌面操作系统生成可执行文件

金牛座的主要缺点

浏览器兼容性：Tauri 的一个主要缺点是您必须担心浏览器兼容性。有一些 Web API 适用于 macOS WebView，但可能不适用于 Windows，反之亦然。此外，输入、按钮等 Web 元素的设计会因操作系统 WebView 而略有不同。您需要牢记这些差异
资源和生态系统：Tauri 仍然很新，它的资源和生态系统也是如此。与如何快速找到大多数 Electron 问题的插件和 StackOverflow 答案不同，Tauri 还没有。然而，这无疑会在未来发生改变
Rust 知识：使用 Tauri 时，大部分情况下您都不需要 Rust。但是，随着您对高级内容的深入了解，您可能必须学习它，例如如果 Tauri 的 JavaScript 插件不支持它们，则必须使用 Rust 进行高阶操作系统调用

创建 Tauri 应用程序

在开始创建 Tauri 应用程序之前，您必须首先安装一些必备的依赖项/包——最值得注意的是 Windows 上的 Microsoft Visual Studio C++ 构建工具和 WebView 2、macOS 的 CLang 和 Xcode 开发依赖项，以及无论操作系统如何的 Rust。您可以在其先决条件页面上找到有关如何设置所有这些的说明（还包括针对不同 Linux 发行版的说明）。

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →

安装所有先决条件后，您可以创建一个新的 Tauri 应用程序：

npm 创建 tauri-app

运行此命令将要求您选择应用名称、窗口名称和首选配方，即，如果您更喜欢使用基本的 HTML、CSS 和 JavaScript 或其他 JavaScript 框架，如 React、Vue 和 Svelte。对于本教程，我们将使用create-react-app > create-react-app (JavaScript)配方。

该过程完成后，您可以使用以下命令运行该应用程序：

npm 运行 tauri dev

第一次运行这个命令需要几秒钟的时间，一旦完成，你应该会在一个新窗口中看到你的新桌面应用程序弹出，如下面的预览：

而且，当然，支持热重载，这意味着我们可以对我们的代码进行更改，它们将立即反映在我们的应用程序中。

文件结构

如果您在您喜欢的文本编辑器中打开新的 app 文件夹，您应该会看到以下文件和目录：

/public和/src目录是 React 的默认值。这里比较新的是/src-tauri文件夹。让我们快速浏览一下这个目录中的重要文件：

src/main.rs— 这个 rust 文件是我们 Tauri 应用程序的入口点；它基本上包含用于引导我们的应用程序的代码。在这里，我们还可以包含可以通过 JavaScript 直接调用的自定义 Rust 函数，稍后我们会看到
Cargo.toml— 该文件类似于 PWA manifest.json，包含我们应用程序的元数据
target/— 运行 build 命令后，此文件夹将包含我们的应用程序可执行文件
tauri.conf.json - 此文件允许您配置和自定义 Tauri 应用程序的各个方面，例如应用程序的名称和允许的 API 列表

锈？

是的。除了运行正常的 Web 相关（HTML、CSS 和 JavaScript）代码之外，Tauri 还提供了一个有用的功能，称为Command。它基本上允许您创建自定义 Rust 函数并通过 JavaScript 调用它们。如果您需要处理繁重的处理或在性能更高的 Rust 代码中进行操作系统调用，这将特别有用。

要开始使用此功能，我们需要在src-tauri/src/main.rs文件中定义我们的函数，同时使用#[tauri::command]. 这是一个例子：

#[tauri::命令]
fn sample_command() {
  println!("从 JavaScript 调用的 Rust 代码！");
}

之后，我们将提供我们在 builder 函数中创建的所有命令的列表，如下所示：

fn 主要（） {
  tauri::Builder::default()
    // 这里的命令列表
    .invoke_handler(tauri::generate_handler![sample_command])
    .run(tauri::generate_context!())
    .expect("运行 tauri 应用程序时出错");
}

有了这一切，我们main.rs文件的完整代码应该是这样的；

#![cfg_attr(
  全部（不（调试断言），target_os =“windows”），
  windows_subsystem = "窗口"
)]

#[tauri::命令]
fn sample_command() {
  println!("从 JavaScript 调用的 Rust 代码！");
}

fn 主要（） {
  tauri::Builder::default()
  // 这里的命令列表
  .invoke_handler(tauri::generate_handler![sample_command])
    .run(tauri::generate_context!())
    .expect("运行 tauri 应用程序时出错");
}

现在，我们可以使用 Tauri 的内置invoke()函数简单地调用这个函数，如下所示：

从“@tauri-apps/api/tauri”导入{调用}；
调用（“sample_command”）；

在我们的项目中运行此代码后，我们应该会看到输出“从 JavaScript 调用的 Rust 代码！” 打印在我们的控制台上。

命令功能允许您做更多事情，例如传递参数、运行异步 rust 函数、管理状态等。有关Tauri 命令功能的更多信息，请参见此处。

桌面 API

Tauri 包括用于访问桌面功能的方法，例如文件系统、剪贴板、对话框、shell 等等，您可以在应用程序的任何位置轻松导入和使用这些功能。下面是如何使用剪贴板的writeText()方法复制文本的示例：

从“@tauri-apps/api/clipboard”导入 { writeText }；

常量 copyToClipboard = async () => {
  等待 writeText("示例文本");
};

如果您也熟悉 Rust 编程语言，您可以编写自定义 Rust 方法来调用操作系统函数并通过 JavaScript 调用它们，就像我们之前所做的那样。

构建应用程序

将 Tauri 项目打包为独立的桌面应用程序非常简单，但首先，您需要将tauri.bundle.identifier文件中的tauri.config.json从更改com.tauri.dev为您首选的唯一标识符。之后，您可以通过运行以下命令继续：

npm 运行 tauri 构建

运行该build命令，Tauri 将自动检测您的操作系统并相应地生成独立的可执行应用程序。

来自 LogRocket 的更多精彩文章：

不要错过来自 LogRocket 的精选时事通讯The Replay
使用 React 的 useEffect优化应用程序的性能
在多个 Node 版本之间切换
了解如何使用 AnimXYZ 为您的 React 应用程序制作动画
探索 Tauri，一个用于构建二进制文件的新框架
比较NestJS 与 Express.js
发现TypeScript 领域中使用的流行 ORM

乐秀视频剪辑会员版App，无水印专业版剪辑神器，安卓视频编辑软件！

从电子迁移

将现有电子项目的基本用户界面迁移到 Tauri 应该相当简单。当您需要开始使用桌面 API、窗口和菜单时，就会出现复杂情况。但是，让我们快速比较差异，以帮助简化迁移过程。

Electron 项目的入口点是主脚本文件（例如main.js），它通常包含一个BrowserWindow()函数，负责加载静态网页并将它们呈现为桌面应用程序。并且在同一功能中，您还可以自定义桌面默认选项，例如其默认大小、位置、可选样式以及自定义事件。

在 Tauri 的情况下，虽然应用程序入口点是src/main.rs file，但上面提到的所有等效自定义都可以简单地在tauri.conf.json文件中完成。

为了跨应用程序异步通信，Electron 包含一个ipcMain用于发出和处理自定义事件的模块。Tauri 中的对应物是事件模块，它使用起来也非常简单。

最后，桌面 API 的使用和集成在两个库中也相似，可以快速从各自的文档页面中提取出来。

结论

这篇文章涵盖了 Tauri 的基础知识，它与 Electron 的工作方式相比如何工作，如何开始使用它，以及迁移现有 Electron 项目的指南。

Tauri 仍处于早期阶段，但它已经提供了许多令人惊叹的功能，并且正在开发更多功能，例如支持所有主要移动操作系统的捆绑二进制文件。

你认为 Tauri 会成为电子杀手吗？让我们在下面听听你的想法。

谢谢阅读！

LogRocket主动显示和诊断您的应用程序和网站中最重要的问题

成千上万的工程和产品团队使用LogRocket来减少了解技术和可用性问题的根本原因所需的时间。使用 LogRocket，您将减少与客户来回对话的时间，并消除无休止的故障排除过程。LogRocket 让您可以花更多时间构建新事物，而减少修复错误的时间