跳到主要内容

10 分钟把你的 Web 应用转为桌面端应用

· 阅读需 6 分钟

在桌面端应用上，Electron 也早已做大做强，GitHub桌面端、VSCode、Figma、Notion、飞书、剪映、得物都基于此。但最近后起之秀的 Tauri 也引人注目，它解决了 Electron 一个大的痛点——打包产物特别大。

我们知道 Electron 基于谷歌内核 Chromium 构建，打包后无论应用多小，至少都得 70M 起步，而 Tauri 使用操作系统内的 Webview1，运行时才会去动态连接 webview，这使得它的打包速度非常快、打包后的应用更小。

Tauri 跟 Electron 一点不同，Electron 使用 JavaScript 编写后台服务，而 Tauri 则使用 Rust，Rust 这两年势头很猛，更安全、性能更好，很多应用都开始转入 Rust 的怀抱，相信不久后也会是前端必学基础。

本文就基于 Tauri 作为构建桌面端应用框架，仅需一点时间，就可以将一个 Web 应用转为桌面端应用。

1. 打开一个 Web 应用​

我们以 FocusTide 这个应用为转换对象，它是 GitHub 开源的一个计时 Web 应用：

首先我们先 Clone 该仓库到本地：

$ git clone git@github.com:Hanziness/FocusTide.git

然后我们安装并且运行起来：

# 安装依赖
$ yarn install

# 启动服务，在 localhost:3000
$ yarn dev

2. 安装 Tauri 依赖​

我们以 Mac 为例，Mac 下需要安装 CLang 和 MacOS 相关开发依赖：

$ xcode-select --install

安装 Tauri：

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

这条命令会安装下载 Rustup，它会下载安装 Rust 相关依赖，当安装成功后控制台会显示：

$ Rust is installed now. Great!

其他操作系统安装 Tauri：

  1. Windows 下安装 Tauri：https://tauri.app/zh-cn/v1/guides/getting-started/prerequisites/#windows
  2. Linux 下安装 Tauri：https://tauri.app/zh-cn/v1/guides/getting-started/prerequisites/#linux

3. 将 Tauri 集合到项目中​

在 Web 应用内，先安装 Tauri 相关的 npm 包

$ npm install --save-dev @tauri-apps/cli

在 pakcage.json 增加脚本命令：

"scripts": {
  "tauri": "tauri"
}

接着跑 Tauri 初始化项目命令：

$ npm run tauri init

这条命令执行之后，会在当前 Web 项目产生如下 Tauri 项目：

执行之后，会有一些问题需要我们去填写

  1. What is your app name? 应用名。这个名字会作为打包后应用的正式名称。

  2. What should the window title be? 默认窗口名称。这个会作为我们打开应用窗口的名称，后续我们不需要这个窗口的话我们可以在 tauri.conf.json 的 hiddenTitle 字段去隐藏它。

  3. Where are your web assets (HTML/CSS/JS) located relative to the < current dir $gt; /src-tauri/tauri.conf.json file that will be created? 生产环境下的文件路径。也就是前端项目打包之后的项目路径，这个路径相对于 /src-tauri/tauri.conf.json 路径。FocusTide 项目打包产物放在项目的 dist 文件夹中，所以我们填 ..dist。

  4. What is the URL of your dev server? 开发环境下的服务路径。FocusTide 项目开发下的服务路径为 http://localhost:3000。

  5. What is your frontend dev command? 前端启动开发命令。FocusTide 项目启动开发命令是 yarn dev。

  6. What is your frontend build command? 前端打包命令。FocusTide 项目的打包命令是 yarn generate。

执行后，生成 src-tauri，接着我们就可以把项目跑起来了：

$ npm run tauri dev

可以看到，我们的应用在窗口跑起来了：

4. 打包发布​

如果开发 OK，我们就可以把应用打包出来。

$ npm run tauri build

执行打包命令后，打包应用会存放在 src-tauri/target/release/bundle 下，可以看到，打包产物非常小：

Tauri 打包过程中，会更根据当前系统平台打包，比如 Mac 下只能打包 .dmg 和 .app 包，Windows 下打包 .msi 和 .exe 包。

5. 部署​

下载后，如果我们要公开这个应用，需要部署应用，这里我们推荐 Laf ，我们可以使用它的云存储#文件管理，把我们的应用上传上去并且得到下载链接：

6. 最后​

整个转换过程其实非常简单快速，如果你花费了超过 10 分钟的话，那我们深表歉意。如果你要继续深入使用桌面后台服务，可以查看 Tauri 官网。

最后，我把转换后的 FocusTide 项目放到了个人 GitHub 上，并且取名为「来做」，目前仅限 Mac 端，欢迎下载 👏🏻

Footnotes​

  1. Tauri vs. Electron: A comparison, how-to, and migration guide: https://blog.logrocket.com/tauri-electron-comparison-migration-guide/ ↩