10 分钟把你的 Web 应用转为桌面端应用
在桌面端应用上,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:
- 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
3. 将 Tauri 集合到项目中
在 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 < current dir $gt; /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
。
执行后,生成 src-tauri
,接着我们就可以把项目跑起来了:
$ npm run tauri dev
可以看到,我们的应用在窗口跑起来了:
4. 打包发布
如果开发 OK,我们就可以把应用打包出来。
$ npm run tauri build
执行打包命令后,打包应用会存放在 src-tauri/target/release/bundle
下,可以看到,打包产物非常小:
Tauri 打包过程中,会更根据当前系统平台打包,比如 Mac 下只能打包
.dmg
和.app
包,Windows 下打包.msi
和.exe
包。