
【免费下载链接】pocketjsPocketJS: create UI on every screen you love. JavaScript components drawn as native pixels on handhelds, desktops and embedded screens. Also home to Pocket3D and MicroTS.项目地址https://gitcode.com/gh_mirrors/poc/pocketjs点击查看免费下载PocketJS 是一个用 JavaScript 组件直接绘制原生像素的 UI 运行时——没有 DOM、没有 WebView同一份代码可以跑在 PSP、PS Vita 到桌面设备上。它的官方 CLI 只需三步就能走通完整开发链路pocket create生成应用骨架pocket check校验清单与目标兼容性pocket build产出可直接运行的安装包。这篇指南带你 10 分钟跑通第一个 PocketJS 应用。先认识一下PocketJS 的 CLI 是什么PocketJS 应用用 TypeScript 编写支持 Solid、Vue Vapor、Octane 三种框架由 QuickJS 客端运行Rust 核心负责 flexbox 布局并逐像素绘制。你写组件CLI 负责剩下的所有事情解析 pocket.json 清单、编译样式表、打包原生产物。CLI 本体是零依赖的 Node 包pocketjs/cli源码位于 tools/cli/bin.mjs命令一览如下命令作用是否修改磁盘pocket create name在apps/下脚手架一个演示应用✅ 生成 3 个文件pocket check --target T只读校验清单、目标能力、应用类型❌ 纯检查pocket compile --target Tcheck 编译出 JS/pak 产物✅ 仅产物pocket build --target Tcheck 编译 打包 PSP / Vita 安装包✅ 完整构建pocket doctor/pocket setup诊断 / 一键安装工具链类 flutter doctorsetup 会安装check、compile、build都基于同一个清单解析器canonical manifest resolverpocket.json是唯一事实来源框架、入口、视口、API 需求都由它决定。准备工作5 分钟搭好环境1. 克隆仓库并安装依赖create/check/build需要在 PocketJS checkout 内运行CLI 会从当前目录向上查找git clone https://gitcode.com/gh_mirrors/poc/pocketjs cd pocketjs bun install2. 全局安装 CLInpm install -g pocketjs/cli3.可选校验并补装工具链pocket doctor # 诊断 Bun、Rust 目标、PSP 工具链缺失项给出修复提示 pocket setup # 安装固定的 PSP 工具链Rust nightly cargo-psp LLVM SDK只想写 UI、在浏览器里预览的话Bun rustup target add wasm32-unknown-unknown就够了只有构建 PSP EBOOT 才需要完整的 Rust/PSP 工具链详见 getting-started 文档。第 1 步pocket create —— 一条命令生成应用骨架在仓库根目录执行pocket create my-app命令会在apps/my-app/下生成三个文件apps/my-app/ ├── app.tsx # 组件一个响应式计数器按 CROSS 键 1 ├── main.tsx # 挂载入口mount(() App /) └── pocket.json # v2 清单应用的全部意图声明app.tsx是一个开箱即用的 Solid 组件createSignal维护计数onButtonPress(BTN.CROSS, …)监听十字键浏览器里是 Z 或回车。想换成 Vue Vapor 或 Octane改pocket.json里的app.framework即可构建管线会自动切换。pocket.json是严格的应用意图生成的默认内容长这样{ pocket: 2, id: dev.example.my-app, name: my-app, version: 0.1.0, engine: { capabilities: { requires: [text.glyphs.baked, input.buttons] } }, app: { entry: main.tsx, output: my-app-main, framework: solid, viewport: { logical: [480, 272], presentation: integer-fit } } }三个新手最该记住的约定id要跨版本保持稳定——Vita 后端会从它推导安装 Title IDrequires里列的能力目标设备缺一个就构建失败这是刻意的提前失败设计可选能力如input.touch放进enhances并保留按键兜底。完整字段定义参考 pocket 2 清单 schema也可以对比现成应用的写法例如 apps/hero/pocket.json。第 2 步pocket check —— 构建前先验证目标兼容性check是只读的不产生任何产物适合在改完pocket.json或组件后随时跑一遍pocket check --target psp --manifest apps/my-app/pocket.json pocket check --target vita --manifest apps/my-app/pocket.json它会做三件事解析pocket.json、校验目标设备的能力/密度是否满足声明、类型检查应用源码。输出形如ok 480x272 · text.glyphs.baked · input.buttons这里的妙处在于一个 bundle多块屏幕同一个pocket.json对 PSP 和 Vita 都能通过——Vita 只是把 480×272 的逻辑视口按 density 2 渲染成 960×544不需要改一行组件代码。想换目标设备清单见 平台契约规范。第 3 步pocket build —— 产出可安装的应用包校验通过后build会串联 check → 编译 → 打包三个环节--之后的参数原样传给选定的原生后端pocket build --target psp --manifest apps/my-app/pocket.json -- --release # 产物hosts/psp/target/mipsel-sony-psp/release/EBOOT.PBPPSP 的EBOOT.PBP可直接拷进 PSP 的PSP/GAME目录运行。构建 Vita 安装包VPK需要先配好 VitaSDKexport VITASDK$HOME/vitasdk export PATH$VITASDK/bin:$HOME/.cargo/bin:$PATH pocket build --target vita --manifest apps/my-app/pocket.json -- --release # 产物apps/my-app/dist/vita/my-app-main.vpkVPK 会自动带上默认的 128×128 气泡图标和完整 LiveArea 启动画面不会看到空白图标或通用启动页。Vita 工具链详情见 hosts/vita/README.md。构建之外验证产物的两条捷径不想掏真机两条命令即可pocket dev my-app-main # 构建 wasm 核心 应用在浏览器开发主机中运行默认 http://127.0.0.1:8130/ pocket devtools my-app # 打开 DevTools 面板 USB 调试桥一帧一帧回放三步走全流程速查把整条链路串起来就是下面这个节奏pocket doctor # 0. 环境体检 pocket setup # 1. 补齐 PSP 工具链 pocket create my-app # 2. 生成应用骨架 pocket check --target psp --manifest apps/my-app/pocket.json pocket check --target vita --manifest apps/my-app/pocket.json pocket build --target psp --manifest apps/my-app/pocket.json -- --release pocket dev my-app-main # 浏览器里先跑起来看效果 小贴士改组件后重跑pocket check只要几秒建议把它当成保存快捷键build留给真正要发布的时候。常见问题Qpocket create提示 not inside a PocketJS checkout命令从当前目录向上查找pocketjs/framework包没找到就会报这个错。先cd进 PocketJS 仓库目录再执行如果你是外部项目安装pocketjs/framework后用POCKETJS_FRAMEWORK_ROOT显式指定即可。Q为什么requires里少一个能力就构建失败这是提前失败策略与其在设备上白屏不如在编译前告诉你目标不满足声明。把可选项挪到enhances并保留按键/触控兜底兼容性会更好。Qcheck 通过了build 却失败大概率是目标后端工具链没装全Rust nightly、cargo-psp、LLVM、PSP SDK。跑一次pocket doctor按提示执行pocket setup即可固定版本都记录在 tools/cli/psp-toolchain.json。Q--后面还能加什么--之后的参数全部透传给原生后端。比如-- --release是 release 构建调试阶段可以先去掉它编译更快。核心文件导航路径说明tools/cli/README.mdCLI 全部命令与工具链说明tools/cli/bin.mjsCLI 入口create / check / build 的实现tools/pocket.ts清单解析器check / compile / build 的共同后端site/content/docs/getting-started.md官方入门指南本文的扩展版contracts/schema/pocket-2.jsonpocket.jsonv2 清单 schemasite/content/docs/build-pipeline.md构建管线细节与产物命名apps/hero/pocket.json一个真实应用的清单范例从create到build三条命令就是 PocketJS 的日常开发循环。下一步可以看看怎么给组件加 构建期 Tailwind 样式或者用 Pocket3D 把场景画进同一块屏幕。赞分享【免费下载链接】pocketjsPocketJS: create UI on every screen you love. JavaScript components drawn as native pixels on handhelds, desktops and embedded screens. Also home to Pocket3D and MicroTS.项目地址https://gitcode.com/gh_mirrors/poc/pocketjs点击查看免费下载相关推荐5步快速掌握Firebase CLI工具新手完整上手指南5步快速掌握Firebase CLI工具新手完整上手指南 Firebase CLI工具是Google Firebase生态系统的核心管理工具让开发者能够通过VLOOK主题快速上手完整指南三步完成配置教程VLOOK主题快速上手完整指南三步完成配置教程 VLOOK主题是一款专为Typora编辑器设计的强大美化工具包和功能增强插件能够显著提升Markdown文档前端文档SvelteKit 框架与 CLI 快速上手从 sv create 到项目构建的完整实战指南SvelteKit 框架与 CLI 快速上手从 sv create 到项目构建的完整实战指南 导读 本文以 packages/kit/README.md htWeb框架后端前端创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考