把一个 JavaScript 游戏打包成桌面应用的挣扎

本篇依然来自于我们的 《前端周刊》 项目!

由团队成员 掘金安东尼 翻译,欢迎大家 进群 持续追踪全球最新前端资讯!!

原文:jslegenddev.substack.com/p/the-strug...

故事要从我花时间做网页小游戏开始。当时,我在考虑各种变现的方式。

遗憾的是,我很快意识到,唯一"现实"的选择就是给网页游戏门户写休闲小游戏,然后靠广告赚钱。这个模式让我毫无兴趣。我更想做一些更深度的游戏,而这需要保存玩家的数据。虽然你可以把数据存在用户浏览器里,但这并不可靠------清理缓存就可能把存档删掉。我也不想为了一款单机游戏去花钱买服务器来保存数据。

我也不想换工具,理由有两点:

第一,我用 JavaScript 和 KAPLAY 游戏库做游戏已经越来越熟练。换任何别的工具,都要花更久才能达到相同效果,而且还要从零开始学一套新东西,这会拖慢进度。我只想做游戏。

第二,我觉得用 JavaScript 做游戏并不是劣势,因为它们能立刻在浏览器里运行,新玩家几乎零门槛。我的策略是:先在网页上放一个 Demo 来测试市场兴趣,再把完整版放到 Steam

问题就来了:我该怎么把一个网页游戏变成能安装在 PC 上、离线运行的桌面应用?

在调研之后,我找到了 5 种潜在技术:

  • Electron
  • Tauri
  • Wails
  • Neutralino
  • NW.js

Electron:流行但臃肿

Electron 允许用 HTML、CSS 和 JavaScript 来开发桌面应用,这对我来说简直完美,因为游戏本身就是基于这些技术的。

它的实现方式是:把整个 Chromium 浏览器和你的应用一起打包。每次你安装一个 Electron 应用,其实就是又装了一份 Chromium。

Chromium 本身运行就吃内存,所以 Electron 应用一直被批评"臃肿"。但对游戏来说,资源消耗其实没那么敏感,所以这不算大问题。也因此,很多跨平台大应用(Mac、Windows、Linux 通吃)都是用 Electron 写的,比如 VSCode、Discord、Slack。

为什么它这么受欢迎?三个原因:

  1. Web 开发者能直接用熟悉的技术做桌面应用,不用学原生 API。
  2. NPM 上几乎所有库都能用,开发速度极快。
  3. 自带 Chromium,保证应用在所有系统上的渲染一致,减少测试成本。

听起来很美好,但我实际体验下来非常烦躁。

Electron 要求把应用拆成"前端"和"后端":

  • 前端跑在浏览器环境,负责 UI。
  • 后端跑在 Node.js,没法直接访问 UI。

这意味着前后端通信需要用 IPC 桥。我只是想做点简单事,比如把用户存档写到本地文件,再读回来。但在 Electron 里,这过程比我想象的复杂得多。

更糟糕的是,打包出可执行文件的流程太繁琐。我试了官方推荐的 Electron Forge,结果只能在 Mac 上打 Mac 应用。可我要发游戏,至少得有 Windows 可执行文件才行(大部分玩家都在 Windows 上,Linux 也因为 Steam Deck 流行起来,但 Mac 用户很少)。

理论上 Forge 支持跨平台构建,但我在给 Windows 打包时遇到各种问题,还得装 WINE。最后我只能放弃,去找替代方案。


Tauri:有趣但我不想写 Rust

接下来我试了 Tauri。它不再自带浏览器,而是调用系统自带的 WebView,看上去更轻量。

试用时,我发现读写文件很方便,因为 Tauri 提供了 JS API。但更复杂的功能就得写 Rust

Rust 是个底层语言,写操作系统内核都行,但我完全不想学它。更麻烦的是,如果要集成 Steam SDK ,就必须走 Rust 端。对比之下,Electron 可以直接用 steamwork.js

另外,Tauri 用的是系统自带 WebView,意味着跨平台渲染结果会有差异:

  • Windows → Edge (Chromium)
  • Mac → WebKit (Safari)
  • Linux → WebKitGTK

这让我必须在三套系统上都测一遍,工作量陡增。再加上 Tauri 也只能在当前系统上打包,跨平台还得多机环境。对我来说,这些都是"劝退点"。


Neutralinojs & Wails

我还看了 NeutralinojsWails,它们和 Tauri 有点类似。

  • Neutralinojs:没有 Rust,提供 JS API,复杂功能要靠 WebSocket 接后端。
  • Wails:换成了 Go,跨平台性不错,比 Rust 友好,但缺少成熟的 JS API,和 Steam SDK 集成也成问题。

意外的答案:NW.js

就在我准备回头继续硬啃 Electron 时,我突然想到:去 SteamDB 看看现有的 JS 游戏都在用什么。

结果发现,最常见的技术竟然是 NW.js ,有 5700+ 款游戏用它。主要原因是 RPG MakerConstruct 这些无代码引擎,底层都基于 JavaScript,它们打包桌面版时就用 NW.js。

这意味着 NW.js 早就被大规模验证过了。

我之前以为它是过时的 Electron 前身,但试了之后发现,它比 Electron 简单太多:

  1. 没有前后端分离,浏览器 JS 和 Node.js JS 在一个环境里,不需要 IPC。存档读写代码一行就行。
  2. 跨平台打包很轻松 :去官网下对应平台的二进制文件,把源码放到 package.nw 文件夹里,运行可执行文件就能跑。再用脚本把它们合并成单一 .exe,改名、换图标,就搞定了。

有人可能会问:这不容易被破解吗?答案是:是的。但这不重要。比如用 Love2D 的《Balatro》,源码一样能被看到,但一样赚了大钱。


结论

试了这么多方案,我得出的结论是:NW.js 是目前打包 JavaScript 游戏为桌面应用最简单的选择

我还做了一个 1 小时独家教程,教你如何用 Vite + NW.js 做一个跨三平台的太空射击游戏,包括:

  • 如何用 Vite 环境变量实现热重载开发,同时能构建桌面版。
  • 如何用 NW-Builder 脚本化打包,不用手动下二进制。
  • 如何用 KAPLAY 写一个射击小游戏。

如果你感兴趣,可以看看这里 👉 教程链接

相关推荐
lecepin12 小时前
AI Coding 资讯 2025-09-03
前端·javascript
喜欢你,还有大家12 小时前
Linux笔记14——shell编程基础-8
linux·前端·笔记
空山新雨(大队长)12 小时前
HTML第二课:块级元素
前端·javascript·html
dreams_dream13 小时前
HTML 标签
前端·html
烟雨迷13 小时前
web自动化测试(selenium)
运维·开发语言·前端·python·selenium·测试工具
wow_DG13 小时前
【Vue2 ✨】Vue2 入门之旅(九):Vue Router 入门
前端·javascript·vue.js
OpenTiny社区14 小时前
“AI 乱炖等于没 AI?”这些AI知识图谱教你秒锁正确场景
前端·开源·agent
zkkkkkkkkkkkkk14 小时前
vue组件中实现鼠标右键弹出自定义菜单栏
javascript·vue.js·vue
夕水15 小时前
原生js实现常规ui组件之input-number篇
javascript