通常，我们说的软件指的是一个可以独立运行的程序，那么我们前端工程师开发的网页也属于软件吗？从计算机的角度来说，网页也是一个软件，但它很少让人归为软件一类。作为一个前端 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 默认头部样式

比如，将我的博客也打包成一个桌面 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的参数基本一致。有关详细信息，请参阅pake-cli 文档。

ICON 生成

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

首先安装 tauri

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

提供一张尺寸是1024*1024透明的图片

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

开发者定制

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

我们可以在项目中直接注入 JavaScript 和 css 代码，就像一个网页的油猴脚本。

比如：官方 ChatGPT 的示例项目中就增加了 GPT-4-mobile 的模型

它通过覆盖默认的 fetch 方法，往返回的结果中注入了 GPT-4-mobile 模型。

同理我们可以注入 css 来隐藏广告，添加事件等。

小结

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

往期回顾

#

如何使用 TypeScript 开发 React 函数式组件？

#

11 个需要避免的 React 错误用法

#

6 个 Vue3 开发必备的 VSCode 插件

#

3 款非常实用的 Node.js 版本管理工具

#

6 个你必须明白 Vue3 的 ref 和 reactive 问题

#

6 个意想不到的 JavaScript 问题

#

试着换个角度理解低代码平台设计的本质

回复“加群”，一起学习进步