前言

提到桌面客户端开发，大家伙儿第一时间会想到的可能是元老级别的 Electron, 亦或者是去年微软新发布的Webview2。今天，我们来结识下一个后起之秀 -- Tauri。

截止目前，Tauri 的 star 数已经达到了 31.4k+ 之多，既然它如此受欢迎，那我们就一起来体验一把，看看它到底有何过人之处。

话不多说，撸起袖子，开始

什么是 Tauri

介绍

Tauri 是一个用来帮助开发者们开发主流桌面平台应用的工具包 - 几乎可以使用任何一个现在已有的前端框架。它的核心是使用 Rust 进行构建，并且脚手架借助 Node.js 使 Tauri 成为一个真正意义上可以使用多语言开发与维护app的工具。

优势

那 Tauri 与其他框架相比，有什么优势呢？在 Tauri 的 github 仓库中，官方给出了一个表格，将 Tauri 与 Electron 做了个对比，具体如下：

Detail	Tauri	Electron
Installer Size Linux	3.1 MB	52.1 MB
Memory Consumption Linux	180 MB	462 MB
Launch Time Linux	0.39s	0.80s
Interface Service Provider	WRY	Chromium
Backend Binding	Rust	Node.js (ECMAScript)
Underlying Engine	Rust	V8 (C/C++)
FLOSS	Yes	No
Multithreading	Yes	Yes
Bytecode Delivery	Yes	No
Multiple Windows	Yes	Yes
Auto Updater	Yes	Yes1
Custom App Icon	Yes	Yes
Windows Binary	Yes	Yes
MacOS Binary	Yes	Yes
Linux Binary	Yes	Yes
iOS Binary	Soon	No
Android Binary	Soon	No
Desktop Tray	Yes	Yes
Sidecar Binaries	Yes	No

总结一下：

1. 相比于 Electron 的安装包大小，仅仅只有 3.1MB 的 Tauri 显然更小更轻便。因为 Tauri 放弃了庞大的 Chromium 内核，改用 WRY(Webview Rendering library) (一种跨平台的 Webview 渲染器，支持主流的操作系统，例如 Windows, macOS, 以及 Linux。)，而且也放弃了 Nodejs，改用 Rust;
2. 在内存占用以及启动速度上，Tauri 也更胜一筹；
3. 除却 Windows, macOS, 以及 Linux 以外，Tauri 官方后续有计划支持 Android 以及 iOS 平台，这也是 Electron 所不具备的；
4. 内部集成了多种模板（如下图所示），对于开发者也更加友好。使用 vue-cli 的小伙伴也可以直接安装官方提供的插件： vue-cli-plugin-tauri。

Tauri 初体验

注意： 笔者的环境搭建基于 MacOS, 想要了解在 Windows 或者 Linux 平台环境搭建的小伙伴们可以移步至这里。

Tauri 环境配置

第一步：安装 Xcode

你可以选择从 App Store 中下载，也可以选择运行如下命令：

$ xcode-select --install

第二步：安装 Node

相信前端的小伙伴们都已经安装了。如果正在看这篇文章的你尚未安装 Nodejs，请移步至 Nodejs官网 下载。

第三步：安装 Rust 编译器 rustup

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

注意： 如果有小伙伴在这一步骤卡壳，遇到了安装失败或者安装过于缓慢的问题，可以尝试科学上网（手动狗头）。

安装完成后，可以通过如下命令验证是否安装成功：

$ rustc --version

至此，我们的环境就已经准备好了，接下来我们就一起来开发一个简单的文档应用。

Tauri + Vuepress 开发一个文档应用

背景

我们日常在查找文档的时候，一般会优先想到去对应的官网查看 Docs 文档。比如我们想去查看 Webpack 对应的文档时，操作流程一般就是：

1. 打开浏览器
2. 打开 Webpack 官方网站
3. 点开文档地址
4. 查看对应的文档

Webpack 官方也提供了一个本地的应用，方便小伙伴们直接在本地就可以查看相应的文档，节省一些繁琐的操作

而我们要实现这个应用的功能就与之类似。

之前我一直在刷 Leetcode 的算法题，并把 算法练习 输出到了 Github 上，与此同时使用 Vuepress 创建了对应算法题的文档（如果可以的话，希望看到这里的大佬给个⭐️（捂脸奔逃~））。本文就使用 Tauri 将次该档打包成一个本地应用。

开始开发

步骤一：创建 Tauri 应用

第一步： 打开文档所在目录，并安装 Tauri 脚手架（本文是在已经存在的路径下创建 Tauri 应用，如果直接创建，可以通过 yarn create tauri-app 命令创建。详情可查阅 此文档）：

yarn add -D @tauri-apps/cli

注意：

1. 该脚手架可以本地安装，也可以全局安装，官方推荐本地安装；
2. 如果使用 npm 命令(而不是使用yarn命令)在本地安装了该脚手架，需要在 package.json 文件的 scripts 配置中添加 "tauri": "tauri" 脚本。

第二步： 执行完成后，将 tauri-cli 添加到 cargo(Rust 的构建系统和包管理器) 子命令中：

cargo install tauri-cli --locked --version ^1.0.0-rc

第三步： 安装 @tauri-apps/api:

yarn add @tauri-apps/api

这个包的作用是什么呢？假如我们的项目中使用了 ES modules，或者是使用了现在比较流行的一些打包构建工具，比如 Webpack、Vite 等等，使用这个包就可以比较安全的访问 Tauri 的接口（关于安全性，官方有专门撰写相应的文档，想了解具体内容小伙伴们可以参考 这篇文章）。

第四步： 初始化 Tauri 应用：

yarn tauri init

项目名称以及窗口标题我们选择默认为项目名称，之后会让你设置静态资源的地址，默认设置为 ../dist。这里我们设置成 Vuepress 打包后的 dist 目录： ../docs/.vuepress/dist。最后的 devServer 我们也默认即可：

至此，我们的 Tauri 项目就已经初始化完成。接下来，我们可以通过以下命令查看该项目的相关信息：

yarn tauri info

执行完成后，会列出项目所对应的一些基本信息，包括 Tauri 脚手架的版本，Nodejs 的版本，项目的目录结构等等：

Operating System - Mac OS, version 12.0.1 X64

Node.js environment
  Node.js - 14.15.0
  @tauri-apps/cli - 1.0.0-rc.4
  @tauri-apps/api - 1.0.0-rc.1

Global packages
  npm - 6.14.15
  pnpm - 6.19.0
  yarn - 1.22.17

Rust environment
  rustup - 1.24.3
  rustc - 1.58.1
  cargo - 1.58.0
  toolchain - stable-x86_64-apple-darwin 

App directory structure
/constants
/node_modules
/utils
/docs
/.github
/src-tauri
/Arithmetic
/preview
/.git
/coverage
/.idea
/src

App
  tauri - 1.0.0-rc.2 (no lockfile)
  tauri-build - no manifest (no lockfile)
  tao - no manifest (no lockfile)
  wry - no manifest (no lockfile)
  build-type - bundle
  CSP - unset
  distDir - ../docs/.vuepress/dist
  devPath - http://localhost:8080/
  framework - Vue.js

步骤二：修改配置

在初始化完成后，我们的项目根目录下会多出一个目录：src-tauri，目录结构如下：

└── src-tauri
    ├── .gitignore
    ├── Cargo.toml
    ├── rustfmt.toml
    ├── tauri.conf.json // tauri 配置文件
    ├── icons // 应用图表文件
    └── src // 打包相关
        ├── build.rs
        ├── cmd.rs
        └── main.rs

打开 tauri.conf.json 文件，修改 build 配置（配置中还可以修改应用的 icon，尺寸等其他信息，有兴趣的小伙伴可以自行探究）：

"build": {
  "distDir": "../docs/.vuepress/dist",
  "devPath": "http://localhost:8080",
  "beforeDevCommand": "yarn docs:dev", // 在运行 yarn tauri dev 命令前执行的命令
  "beforeBuildCommand": "yarn docs:build" // 在运行 yarn tauri build 命令前执行的命令
},

修改完成后，在执行命令之前，我们先看看 tauri 有哪些命令。执行 yarn tauri help：

USAGE:
    yarn run tauri <SUBCOMMAND> // 使用

OPTIONS:
    -h, --help       Print help information // 打印帮助信息
    -V, --version    Print version information // 打印版本信息

SUBCOMMANDS:
    build     Tauri build // 构建 tauri 包
    dev       Tauri dev // 本地开发命令
    help      Print this message or the help of the given subcommand(s) // 打印帮助信息
    info      Shows information about Tauri dependencies and project configuration // 打印项目信息
    init      Initializes a Tauri project // 初始化 tauri 项目
    plugin    Manage Tauri plugins // tauri 插件管理
    signer    Tauri updater signer // tauri 更新

了解完相关执行命令，我们执行 yarn tauri dev 命令。之后，会先执行我们先前配置的 beforeDevCommand 命令，在本地启动项目，然后会构建一个本地应用。

注意： 这里需要注意，本地 Vuepress 项目的端口号要与 devPath 中配置的一致！

在等待一段时间后，便会启动本地的应用：

截止目前，我们的本地项目就已经可以成功运行啦~

步骤三：打包应用

打包应用只需要运行 build 命令即可：

yarn tauri build

打包完成后，会在 src-tauri/target/release/bundle 目录下生成相应的应用安装执行文件

直接双击安装，之后便可以在本地使用这个应用来查看文档啦~ 大功告成，完结撒花~

写在最后

看到这里，相信小伙伴们心中多少对 Tauri 这个后起之秀有了一些了解，有兴趣或者有需求的小伙伴们不妨来尝试一下~

本文是关于 Tauri 的一次浅尝，更多玩法大家可以参考官方文档。

注：本文已同步至酱豆腐精的小站，欢迎围观~