tauri - 可替换 electron 的PC端 SPA 框架

来源:博客园 分类: 文章浏览史 发布时间:2022-08-29 14:27:41 最后更新:2022-08-29 浏览:456
转载声明:
本文为摘录自“博客园”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2022-08-29 14:27:41

最近意外发现了这个框架,从这框架的说明和我的实践来看,确实是以后 PC 端的主流框架, 大家都知道 electron 的唯二缺点: 1. 性能较差 2.包的尺寸太大.下面给出使用 tauri 的理由

tauri 介绍

以下介绍来自官方说明:

为什么使用 tauri

  • 原始Tauri应用程序的打包大小小于3 MB,比Electron的大小小140 MB。
  • 内存占用小于使用相同代码库构建的Electron应用程序的大小的一半。
  • 安全是Tauri的头等大事,我们正在不断创新。
  • 遗憾的是,底层是 Chromium 的使用者(例如Electron)无法获得 FLOSS(自由/开源软件) 许可。 资料来源:0 1 2

技术细节

tauri 具有五个主要组成部分:

  • 用于创建,开发和构建应用程序的Node.js CLI
  • Rust Core,用于绑定到底层WEBVIEW并提供可摇树优化的API
  • Rust Bundler用于制造最终的二进制文件
  • Webview的Rust绑定
  • Webview低层库,用于创建和与操作系统“本机” Webview交互

Tauri应用程序中的用户界面目前在macOS上使用Cocoa / WebKit,在Linux上使用gtk-webkit2,在Windows上通过Edge使用MSHTML(IE10 / 11)或Webkit。 Tauri基于MIT许可的进行工作,即webview。

tauri 与 electron 的对比

Tauri Electron
MacOS 的包大小 0.6 MB 47.7 MB
MacOS 的内存消耗 13 MB 34.1 MB
接口服务提供 Varies Chromium
后台绑定 Rust Node.js (ECMAScript)
底层引擎 C/C++ V8 (C/C++)
自由/开源软件 Yes No
多线程 Yes No
字节码传递 Yes No
可以显示PDF Yes No
多窗口 Soon Yes
GPU 访问 Yes Yes
自动更新 Soon Yes (1)
跨平台 Yes Yes
自定义 APP 图标 Yes Yes
Windows 包 Yes Yes
MacOS 包 Yes Yes
Linux 包 Yes Yes
iOS 包 Soon No
Android 包 Soon No
支持本地 web 服务 Yes Yes
没有本地服务选项 Yes No
桌面文件盒 Soon No

Notes

  1. Electron在Linux上没有本地自动更新程序,但由electron-packager提供

环境搭建

以下为 macOS 为例子, 其他的环境可以查看原文档 点此查看

Tauri是一个多语言系统,因此需要大量工具。

系统依赖项:

$ brew install gcc

使用 brew 下载 gcc 依赖

node 运行环境:

此框架的运行需要 node 12 以上的环境:

nvm install 12
nvm use 12

使用 nvm 下载 node 12

Rustc and Cargo 包管理

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

这条命令时需要梯子才能下好的
下载的时候一路回车即可
完成后,关闭终端,打开后查看

grewer@Grewer-2 ~ % rustc --version
rustc 1.42.0 (b8cedc004 2020-03-09)

Tauri 打包工具

$ cargo install tauri-bundler --force

此命令的下载也建议使用梯子,不然会比较慢

至此, 此框架的基础环境都已经搭建完成

使用(无缝融合进现有的项目)

首先你需要一个 web 项目, 可以是 react-create-app 或者 vue-cli 创建的项目,也可以是任意的 web 项目

在项目中下载 tauri:

yarn add tauri
# 或者
npm install tauri

下载完成后,在当前项目的目录下,使用命令

tauri init

之后, 你的项目下会出现一个目录 src-tauri:

再根据你的 web 项目启动时的端口修改文件 src-tauri/tauri.conf.json:

 "build": {
    "distDir": "../build", //打包后的路径
    "devPath": "http://localhost:8080", // 此为 dev 启动时的url
    "beforeDevCommand": "",
    "beforeBuildCommand": ""
  },

现在启动项目:

    "dev": "tauri dev",

第一次启动的时候会有点慢,要加载一些东西,后面就快了很多了

这里我留下我的 demo:

https://github.com/Grewer/tauri-example

总结

从上述情况来看,这确实是一个潜力更加大的 PC 框架,但是现在(时间点:2020-04-27)的缺点也明显,就是还不够成熟
所以现在实验性的 PC 项目可以使用,但是想在生产环境使用,还需要在等等

2021-5-19 更新

现在使用 tauri 需要下载的库是 @tauri-apps/cli, 一切以官网为准https://tauri.studio/en/docs/usage/development/integration

php技术微信