在桌面端應(yīng)用上，Electron 也早已做大做強(qiáng)，GitHub桌面端、VSCode、Figma、Notion、飛書、剪映、得物都基于此。但最近后起之秀的 Tauri 也引人注目，它解決了 Electron 一個(gè)大的痛點(diǎn)——打包產(chǎn)物特別大。
我們知道 Electron 基于谷歌內(nèi)核 Chromium 構(gòu)建，打包后無論應(yīng)用多小，至少都得 70M 起步，而 Tauri 使用操作系統(tǒng)內(nèi)的 Webview1，運(yùn)行時(shí)才會(huì)去動(dòng)態(tài)連接 webview，這使得它的打包速度非?？?、打包后的應(yīng)用更小。
Tauri 跟 Electron 一點(diǎn)不同，Electron 使用 JavaScript 編寫后臺(tái)服務(wù)，而 Tauri 則使用 Rust，Rust 這兩年勢(shì)頭很猛，更安全、性能更好，很多應(yīng)用都開始轉(zhuǎn)入 Rust 的懷抱，相信不久后也會(huì)是前端必學(xué)基礎(chǔ)。
本文就基于 Tauri 作為構(gòu)建桌面端應(yīng)用框架，僅需一點(diǎn)時(shí)間，就可以將一個(gè) Web 應(yīng)用轉(zhuǎn)為桌面端應(yīng)用。
1. 打開一個(gè) Web 應(yīng)用
我們以 FocusTide 這個(gè)應(yīng)用為轉(zhuǎn)換對(duì)象，它是 GitHub 開源的一個(gè)計(jì)時(shí) Web 應(yīng)用：
- 網(wǎng)站地址：https://focustide.app/
- 倉庫地址：
https://github.com/Hanziness/FocusTide
首先我們先 Clone 該倉庫到本地：
$ git clone git@github.com:Hanziness/FocusTide.git
然后我們安裝并且運(yùn)行起來：
# 安裝依賴
$ yarn install
# 啟動(dòng)服務(wù)，在 localhost:3000
$ yarn dev
2. 安裝 Tauri 依賴
我們以 Mac 為例，Mac 下需要安裝 CLang 和 MacOS 相關(guān)開發(fā)依賴：
$ xcode-select --install
安裝 Tauri：
$ curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh
這條命令會(huì)安裝下載 Rustup，它會(huì)下載安裝 Rust 相關(guān)依賴，當(dāng)安裝成功后控制臺(tái)會(huì)顯示：
$ Rust is installed now. Great!
其他操作系統(tǒng)安裝 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 集合到項(xiàng)目中
在 Web 應(yīng)用內(nèi)，先安裝 Tauri 相關(guān)的 npm 包
$ npm install --save-dev @tauri-apps/cli
在 pakcage.json 增加腳本命令：
"scripts": {
"tauri": "tauri"
}
接著跑 Tauri 初始化項(xiàng)目命令：
$ npm run tauri init
這條命令執(zhí)行之后，會(huì)在當(dāng)前 Web 項(xiàng)目產(chǎn)生如下 Tauri 項(xiàng)目：
執(zhí)行之后，會(huì)有一些問題需要我們?nèi)ヌ顚?/p>
-
What is your app name?
應(yīng)用名。這個(gè)名字會(huì)作為打包后應(yīng)用的正式名稱。 -
What should the window title be?
默認(rèn)窗口名稱。這個(gè)會(huì)作為我們打開應(yīng)用窗口的名稱，后續(xù)我們不需要這個(gè)窗口的話我們可以在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?
生產(chǎn)環(huán)境下的文件路徑。也就是前端項(xiàng)目打包之后的項(xiàng)目路徑，這個(gè)路徑相對(duì)于/src-tauri/tauri.conf.json路徑。FocusTide 項(xiàng)目打包產(chǎn)物放在項(xiàng)目的dist文件夾中，所以我們填..dist。 -
What is the URL of your dev server?
開發(fā)環(huán)境下的服務(wù)路徑。FocusTide 項(xiàng)目開發(fā)下的服務(wù)路徑為http://localhost:3000。 -
What is your frontend dev command?
前端啟動(dòng)開發(fā)命令。FocusTide 項(xiàng)目啟動(dòng)開發(fā)命令是yarn dev。 -
What is your frontend build command?
前端打包命令。FocusTide 項(xiàng)目的打包命令是yarn generate。
執(zhí)行后，生成 src-tauri，接著我們就可以把項(xiàng)目跑起來了：
$ npm run tauri dev
可以看到，我們的應(yīng)用在窗口跑起來了：
4. 打包發(fā)布
如果開發(fā) OK，我們就可以把應(yīng)用打包出來。
$ npm run tauri build
執(zhí)行打包命令后，打包應(yīng)用會(huì)存放在 src-tauri/target/release/bundle 下，可以看到，打包產(chǎn)物非常?。?/p>
Tauri 打包過程中，會(huì)更根據(jù)當(dāng)前系統(tǒng)平臺(tái)打包，比如 Mac 下只能打包
.dmg和.app包，Windows 下打包.msi和.exe包。
5. 部署
下載后，如果我們要公開這個(gè)應(yīng)用，需要部署應(yīng)用，這里我們推薦 Laf ，我們可以使用它的云存儲(chǔ)#文件管理，把我們的應(yīng)用上傳上去并且得到下載鏈接：
6. 最后
整個(gè)轉(zhuǎn)換過程其實(shí)非常簡(jiǎn)單快速，如果你花費(fèi)了超過 10 分鐘的話，那我們深表歉意。如果你要繼續(xù)深入使用桌面后臺(tái)服務(wù)，可以查看 Tauri 官網(wǎng)。
最后，我把轉(zhuǎn)換后的 FocusTide 項(xiàng)目放到了個(gè)人 GitHub 上，并且取名為「來做」，目前僅限 Mac 端，歡迎下載 ????文章來源：http://www.zghlxwxcb.cn/news/detail-419822.html
- 下載鏈接：下載鏈接
- GitHub 倉庫：https://github.com/Penggeor/lai-todo
-
Tauri vs. Electron: A comparison, how-to, and migration guide: https://blog.logrocket.com/tauri-electron-comparison-migration-guide/ ??文章來源地址http://www.zghlxwxcb.cn/news/detail-419822.html
到了這里，關(guān)于10 分鐘把你的 Web 應(yīng)用轉(zhuǎn)為桌面端應(yīng)用的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
