通常，我们说的软件指的是一个可以独立运行的程序，那么我们前端工程师开发的网页也属于软件吗？从计算机的角度来说，网页也是一个软件，但它很少让人归为软件一类。作为一个前端 web 开发者，我一直被桌面 App 所吸引，它拥有更快的加载速度，并且拥有完全独立的应用界面，让人觉得更加专业。因此我也想开发出属于自己的独立桌面 APP。

作为一名 web 开发者，若想要开发出属于自己的桌面 App，技术上我们可以选择使用 Electron JS 或者 tauri，但使用他们都需要一定开发成本，今天我将介绍一个开源的构建工具 Pake，它使用 Rust 或者说是 tauri，使用一个命令就可以将网页打包成一个很小的桌面 App。

使用

# Install with npm
npm install -g pake-cli

# Command usage
pake url [OPTIONS]...

# example
pake https://maqib.cn --name Blog --transparent --icon ./blog.icns

首次打包会比较慢，--transparent 表示启用沉浸式头部，mac 上没有 App 默认头部样式。我们还可以通过注入脚本来隐藏谷歌广告，下文会讲到。

前提条件

mac 用户本地打包需要确保 Rust >=1.63 和 Node >=16使用以下命令查看 rust 版本

rustc --version

如果 rust 版本较低可以使用以下命令更新版本

rustup update

windows 用户需要设置 Microsoft Visual Studio C++ 构建

在线打包

如果绝的本地配置环境麻烦，我们可以使用 Github Action 在线打包。

· 首先 Fork 这个项目

· 然后进入 Actions 界面，选择 Build App with Pake Cli，填写表单信息，然后单击 Run Workflow。

表单参数和填写要求与pake cli的参数基本一致。

ICON生成

唯一要做的是设计一个 ICON，打包的平台不同，需要有不同格式的 ICON，.icns,.ico,.png icons。我们可以从 macOSicons 中下载一个 ICON， 也可以使用 tauri 命令打包出适配不同平台适配的 ICON

首先安装 tauri

yarn add tauri
yarn tauri icon ./app-logo.png

我们可以在 figma 中建立一个 frame 大小是512*512，中间的底色大小是412*412，圆角弧度是90, 导出 2 倍尺寸 png 就可以了。中间的底色大小和圆角不是固定值，可以自行设计。

开发者定制

对于 rust 和前端开发者，我们也可以基于 Pake 的工程自定义开发，Pake 是一个基于 tauri 项目，其优势是我们可以直接基于一个在线网页进行定制，解决了桌面 App 更新的烦恼，比如其GIThub上就有:微信读书 Twitter、ChatGPT 等示例项目。

我们可以在项目中直接注入 JavaScript 和 css 代码，就像一个网页的油猴脚本。同理我们可以注入 css 来隐藏广告，添加事件等。

小结

糯麦为大家介绍了一个命令行工具 Pake，使用 Rust 将打包网页生成小型桌面应用，支持 Mac / Windows / Linux。相比传统的 Electron 打包，要小将近 20 倍，大小在5M 上下。底层使用 Rust Tauri 框架，性能体验较 JS 框架要轻快不少，内存小很多，实现了沉浸式的窗口、拖动、样式改写、去广告等功能。有兴趣的小伙伴可以去试试。