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

news2024/11/18 23:33:48

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

我们知道 Electron 基于谷歌内核 Chromium 构建，打包后无论应用多小，至少都得 70M 起步，而 Tauri 使用操作系统内的 Webview¹，运行时才会去动态连接 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

我们以 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：

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

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

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

在 pakcage.json 增加脚本命令：

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

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

$ npm run tauri init

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

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

What is your app name?
应用名。这个名字会作为打包后应用的正式名称。
What should the window title be?
默认窗口名称。这个会作为我们打开应用窗口的名称，后续我们不需要这个窗口的话我们可以在 tauri.conf.json 的 hiddenTitle 字段去隐藏它。
Where are your web assets (HTML/CSS/JS) located relative to the /src-tauri/tauri.conf.json file that will be created?
生产环境下的文件路径。也就是前端项目打包之后的项目路径，这个路径相对于 /src-tauri/tauri.conf.json 路径。FocusTide 项目打包产物放在项目的 dist 文件夹中，所以我们填 ..dist。
What is the URL of your dev server?
开发环境下的服务路径。FocusTide 项目开发下的服务路径为 http://localhost:3000。
What is your frontend dev command?
前端启动开发命令。FocusTide 项目启动开发命令是 yarn dev。
What is your frontend build command?
前端打包命令。FocusTide 项目的打包命令是 yarn generate。