tauri - 可替换 electron 的PC端 SPA 框架
最近意外发现了这个框架,从这框架的说明和我的实践来看,确实是以后 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
- 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
