【免費下載鏈接】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 到桌面設(shè)備上。它的官方 CLI 只需三步就能走通完整開發(fā)鏈路pocket create生成應(yīng)用骨架pocket check校驗清單與目標(biāo)兼容性pocket build產(chǎn)出可直接運行的安裝包。這篇指南帶你 10 分鐘跑通第一個 PocketJS 應(yīng)用。先認(rèn)識一下PocketJS 的 CLI 是什么PocketJS 應(yīng)用用 TypeScript 編寫支持 Solid、Vue Vapor、Octane 三種框架由 QuickJS 客端運行Rust 核心負(fù)責(zé) flexbox 布局并逐像素繪制。你寫組件CLI 負(fù)責(zé)剩下的所有事情解析 pocket.json 清單、編譯樣式表、打包原生產(chǎn)物。CLI 本體是零依賴的 Node 包pocketjs/cli源碼位于 tools/cli/bin.mjs命令一覽如下命令作用是否修改磁盤pocket create name在apps/下腳手架一個演示應(yīng)用? 生成 3 個文件pocket check --target T只讀校驗清單、目標(biāo)能力、應(yīng)用類型? 純檢查pocket compile --target Tcheck 編譯出 JS/pak 產(chǎn)物? 僅產(chǎn)物pocket build --target Tcheck 編譯 打包 PSP / Vita 安裝包? 完整構(gòu)建pocket doctor/pocket setup診斷 / 一鍵安裝工具鏈類 flutter doctorsetup 會安裝check、compile、build都基于同一個清單解析器canonical manifest resolverpocket.json是唯一事實來源框架、入口、視口、API 需求都由它決定。準(zhǔn)備工作5 分鐘搭好環(huán)境1. 克隆倉庫并安裝依賴create/check/build需要在 PocketJS checkout 內(nèi)運行CLI 會從當(dāng)前目錄向上查找git clone https://gitcode.com/gh_mirrors/poc/pocketjs cd pocketjs bun install2. 全局安裝 CLInpm install -g pocketjs/cli3.可選校驗并補裝工具鏈pocket doctor # 診斷 Bun、Rust 目標(biāo)、PSP 工具鏈缺失項給出修復(fù)提示 pocket setup # 安裝固定的 PSP 工具鏈Rust nightly cargo-psp LLVM SDK只想寫 UI、在瀏覽器里預(yù)覽的話Bun rustup target add wasm32-unknown-unknown就夠了只有構(gòu)建 PSP EBOOT 才需要完整的 Rust/PSP 工具鏈詳見 getting-started 文檔。第 1 步pocket create —— 一條命令生成應(yīng)用骨架在倉庫根目錄執(zhí)行pocket create my-app命令會在apps/my-app/下生成三個文件apps/my-app/ ├── app.tsx # 組件一個響應(yīng)式計數(shù)器按 CROSS 鍵 1 ├── main.tsx # 掛載入口mount(() App /) └── pocket.json # v2 清單應(yīng)用的全部意圖聲明app.tsx是一個開箱即用的 Solid 組件createSignal維護計數(shù)onButtonPress(BTN.CROSS, …)監(jiān)聽十字鍵瀏覽器里是 Z 或回車。想換成 Vue Vapor 或 Octane改pocket.json里的app.framework即可構(gòu)建管線會自動切換。pocket.json是嚴(yán)格的應(yīng)用意圖生成的默認(rèn)內(nèi)容長這樣{ 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要跨版本保持穩(wěn)定——Vita 后端會從它推導(dǎo)安裝 Title IDrequires里列的能力目標(biāo)設(shè)備缺一個就構(gòu)建失敗這是刻意的提前失敗設(shè)計可選能力如input.touch放進enhances并保留按鍵兜底。完整字段定義參考 pocket 2 清單 schema也可以對比現(xiàn)成應(yīng)用的寫法例如 apps/hero/pocket.json。第 2 步pocket check —— 構(gòu)建前先驗證目標(biāo)兼容性check是只讀的不產(chǎn)生任何產(chǎn)物適合在改完pocket.json或組件后隨時跑一遍pocket check --target psp --manifest apps/my-app/pocket.json pocket check --target vita --manifest apps/my-app/pocket.json它會做三件事解析pocket.json、校驗?zāi)繕?biāo)設(shè)備的能力/密度是否滿足聲明、類型檢查應(yīng)用源碼。輸出形如ok 480x272 · text.glyphs.baked · input.buttons這里的妙處在于一個 bundle多塊屏幕同一個pocket.json對 PSP 和 Vita 都能通過——Vita 只是把 480×272 的邏輯視口按 density 2 渲染成 960×544不需要改一行組件代碼。想換目標(biāo)設(shè)備清單見 平臺契約規(guī)范。第 3 步pocket build —— 產(chǎn)出可安裝的應(yīng)用包校驗通過后build會串聯(lián) check → 編譯 → 打包三個環(huán)節(jié)--之后的參數(shù)原樣傳給選定的原生后端pocket build --target psp --manifest apps/my-app/pocket.json -- --release # 產(chǎn)物hosts/psp/target/mipsel-sony-psp/release/EBOOT.PBPPSP 的EBOOT.PBP可直接拷進 PSP 的PSP/GAME目錄運行。構(gòu)建 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 # 產(chǎn)物apps/my-app/dist/vita/my-app-main.vpkVPK 會自動帶上默認(rèn)的 128×128 氣泡圖標(biāo)和完整 LiveArea 啟動畫面不會看到空白圖標(biāo)或通用啟動頁。Vita 工具鏈詳情見 hosts/vita/README.md。構(gòu)建之外驗證產(chǎn)物的兩條捷徑不想掏真機兩條命令即可pocket dev my-app-main # 構(gòu)建 wasm 核心 應(yīng)用在瀏覽器開發(fā)主機中運行默認(rèn) http://127.0.0.1:8130/ pocket devtools my-app # 打開 DevTools 面板 USB 調(diào)試橋一幀一幀回放三步走全流程速查把整條鏈路串起來就是下面這個節(jié)奏pocket doctor # 0. 環(huán)境體檢 pocket setup # 1. 補齊 PSP 工具鏈 pocket create my-app # 2. 生成應(yīng)用骨架 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只要幾秒建議把它當(dāng)成保存快捷鍵build留給真正要發(fā)布的時候。常見問題Qpocket create提示 not inside a PocketJS checkout命令從當(dāng)前目錄向上查找pocketjs/framework包沒找到就會報這個錯。先cd進 PocketJS 倉庫目錄再執(zhí)行如果你是外部項目安裝pocketjs/framework后用POCKETJS_FRAMEWORK_ROOT顯式指定即可。Q為什么requires里少一個能力就構(gòu)建失敗這是提前失敗策略與其在設(shè)備上白屏不如在編譯前告訴你目標(biāo)不滿足聲明。把可選項挪到enhances并保留按鍵/觸控兜底兼容性會更好。Qcheck 通過了build 卻失敗大概率是目標(biāo)后端工具鏈沒裝全Rust nightly、cargo-psp、LLVM、PSP SDK。跑一次pocket doctor按提示執(zhí)行pocket setup即可固定版本都記錄在 tools/cli/psp-toolchain.json。Q--后面還能加什么--之后的參數(shù)全部透傳給原生后端。比如-- --release是 release 構(gòu)建調(diào)試階段可以先去掉它編譯更快。核心文件導(dǎo)航路徑說明tools/cli/README.mdCLI 全部命令與工具鏈說明tools/cli/bin.mjsCLI 入口create / check / build 的實現(xiàn)tools/pocket.ts清單解析器check / compile / build 的共同后端site/content/docs/getting-started.md官方入門指南本文的擴展版contracts/schema/pocket-2.jsonpocket.jsonv2 清單 schemasite/content/docs/build-pipeline.md構(gòu)建管線細(xì)節(jié)與產(chǎn)物命名apps/hero/pocket.json一個真實應(yīng)用的清單范例從create到build三條命令就是 PocketJS 的日常開發(fā)循環(huán)。下一步可以看看怎么給組件加 構(gòu)建期 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點擊查看免費下載相關(guān)推薦5步快速掌握Firebase CLI工具新手完整上手指南5步快速掌握Firebase CLI工具新手完整上手指南 Firebase CLI工具是Google Firebase生態(tài)系統(tǒng)的核心管理工具讓開發(fā)者能夠通過VLOOK主題快速上手完整指南三步完成配置教程VLOOK主題快速上手完整指南三步完成配置教程 VLOOK主題是一款專為Typora編輯器設(shè)計的強大美化工具包和功能增強插件能夠顯著提升Markdown文檔前端文檔SvelteKit 框架與 CLI 快速上手從 sv create 到項目構(gòu)建的完整實戰(zhàn)指南SvelteKit 框架與 CLI 快速上手從 sv create 到項目構(gòu)建的完整實戰(zhàn)指南 導(dǎo)讀 本文以 packages/kit/README.md htWeb框架后端前端創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考