• tauri 可替换 electron 的PC端 SPA 框架 (两种把前端JS代码生成exe文件的框架)


    最近意外发现了这个框架,从这框架的说明和我的实践来看,确实是以后 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 的对比

     TauriElectron
    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

  • 相关阅读:
    iOS 日期格式
    时间复杂度、空间复杂度
    转载 -- 算法题
    奇奇怪怪的Bug
    iOS12中推送通知新特性
    iOS开发网络篇—Socket编程
    iOS:菜单控制器和菜单项:UIMenuController和UIMenuItem
    关于textField输入光标颜色及cleanButton大小和颜色的设置
    腾讯云开发微信小程序使用体验
    简单理解JavaScript原型链
  • 原文地址:https://www.cnblogs.com/2019gdiceboy/p/15688423.html
Copyright © 2020-2023  润新知