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

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

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

什么是 Tauri

介绍

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

优势

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

总结一下：

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 的一次浅尝，更多玩法大家可以参考官方文档。