Ripple 快速上手从零搭建 TSRX 项目、开发调试与编辑器集成【免费下载链接】ripplethe elegant TypeScript UI framework项目地址: https://gitcode.com/GitHub_Trending/ripple25/ripple本文是 Ripple 框架的快速上手指南面向希望第一时间把 Ripple 跑起来的开发者。Ripple 是一个基于 TSRXTypeScript 超集的编译器驱动 UI 框架使用.tsrx组件文件把声明式的结构、控制流与样式统一在同一份代码中。读完本文你将掌握两种项目初始化方式实验性create-rippleCLI 与 Vite 基础模板克隆、理解基础模板的目录结构与关键配置并能在 VS Code、WebStorm/IntelliJ、Sublime Text 中配置语法高亮、诊断与自动补全。环境前提在开始之前请确保本机具备Node.js 22 或更高版本基础模板的 package.json 中声明了engines: { node: 22.0.0 }低于该版本会无法正常安装依赖。包管理器模板同时支持npm、pnpm、yarn后续命令以npm为例。基础的前端知识HTML、CSS、JavaScript。Ripple 本身对框架经验没有硬性要求但完全零基础直接上手框架并不是最佳路径。先在线体验如果不想在本地安装任何东西可以直接在浏览器里打开 StackBlitz 上基于templates/basic的在线示例create-ripple官方文档中提供入口。它预置了完整的 Ripple Vite 环境可以立即编辑App.tsrx并看到热更新效果适合先快速感受.tsrx组件的写法。方式一使用 create-ripple CLI实验性Ripple 官方提供实验性的脚手架 CLI一条命令即可创建新项目npm create ripple运行后按照交互提示输入项目名并选择模板即可。该命令会执行create-ripple包其入口packages/create-ripple/src/index.js实际委托给ripple-ts/cli完成项目生成逻辑。需要说明的是该 CLI 当前标注为Experimental接口与模板列表仍可能变化。方式二克隆 Vite 基础模板推荐最稳定如果希望使用当前最稳定、可完整查看的模板结构推荐直接用degit从仓库的templates/basic目录克隆注意是克隆模板子目录而不是整个仓库npx degit Ripple-TS/ripple/templates/basic ripple-app cd ripple-app npm i npm run devnpx degit Ripple-TS/ripple/templates/basic ripple-app把模板拉取到本地ripple-app目录跳过 git 历史速度快且干净。npm i安装依赖其中核心依赖为ripple运行时开发依赖包括ripple-ts/vite-plugin、tsrx/language-server、tsrx/typescript-plugin、tsrx/prettier-plugin、tsrx/eslint-plugin等见 templates/basic/package.json。npm run dev启动 Vite 开发服务器默认端口为3000见下文配置。启动后浏览器访问开发服务器地址即可看到带计数器的示例页面。基础模板结构解析克隆下来的模板目录结构与仓库中的 templates/basic 一致ripple-app/ ├── src/ │ ├── assets/ # 静态资源favicon、logo │ ├── App.tsrx # 根组件.tsrx 组件文件 │ └── index.ts # 入口文件挂载根组件 ├── index.html # HTML 入口包含 #root 挂载点 ├── package.json # 脚本与依赖声明 ├── tsconfig.json # TypeScript/TSRX 编译配置 ├── vite.config.js # Vite 配置注册 ripple 插件 ├── eslint.config.js # ESLint 配置.tsrx 默认支持 └── README.md # 模板自述入口与挂载index.ts入口文件 src/index.ts 使用mount将根组件挂载到#rootimport { mount } from ripple; // ts-expect-error: known issue, were working on it import { App } from ./App.tsrx; mount(App, { target: document.getElementById(root), });mount()是 Ripple 的客户端渲染入口负责把组件渲染进目标 DOM 节点并建立细粒度的响应式更新。关于mount()与 SSR 场景下的hydrate()水合的详细用法可参见 website/docs/guide 下的应用指南website/docs/introduction.md 中也有 SSR缓冲或流式与pending回退的总体说明。根组件App.tsrx根组件 src/App.tsrx 展示了.tsrx的核心语法形态——Statement Container语句容器import { track } from ripple; export function App() { div classapp div classcard img src../src/assets/ripple-logo-horizontal.png altRipple Logo classlogo / p classsubtitleThe elegant TypeScript UI framework./p div classcounter{ let [count] track(0); button onClick{() count--}-/button span classcount{count}/span button onClick{() count}/button / }/div ... /div /div style :global(body) { margin: 0; } ... /style / }关键语法点{}语句容器函数体内以{...}包裹组件内容内部可以写本地设置逻辑如track声明响应式状态最后以一个 JSX 元素、Fragment.../或控制流表达式收尾作为渲染输出。模板中甚至展示了嵌套的{}容器div classcounter{...}/div来隔离局部状态。track与[]懒解构let [count] track(0);创建一个初始值为0的响应式信号[]是 Ripple 特有的“懒解构”语法解构出的count在读取时自动追踪依赖。按钮的onClick{() count--}/onClick{() count}直接修改信号界面会以细粒度方式精准更新对应节点。内联style块模板在组件内直接编写作用域样式:global(...)用于声明全局样式。这体现了“结构、逻辑、样式一体”的声明式设计。class属性与 DOM 的class语义一致模板内部会做编译期处理注意与 React 的className区分。Vite 与 TypeScript 配置vite.config.js 中注册了 Ripple 的 Vite 插件import { defineConfig } from vite; import { ripple } from ripple-ts/vite-plugin; export default defineConfig({ plugins: [ripple()], server: { port: 3000, }, build: { target: esnext, }, });plugins: [ripple()]ripple-ts/vite-plugin负责编译.tsrx文件并把 Ripple 运行时接入构建链路该插件实现位于 packages/vite-plugin还额外提供ripple-preview等二进制工具。server.port: 3000开发服务器固定端口。build.target: esnext构建产物面向现代浏览器。tsconfig.json 中值得关注的点jsx: preserve与jsxImportSource: ripple让 TSX 语法指向 Ripple 运行时。plugins: [{ name: tsrx/typescript-plugin }]接入 TSRX 的 TypeScript 语言服务插件为.tsrx提供类型检查与补全。其余为现代前端工程的常规严格配置strict、noEmit、isolatedModules、moduleResolution: bundler等。模板内置脚本package.json 提供了完整的开发运维脚本命令作用npm run dev启动 Vite 开发服务器别名startnpm run build生产构建vite buildnpm run serve预览生产构建产物vite previewnpm run typecheck使用tsrx-tsc --noEmit做类型检查npm run lint使用 ESLint 检查含tsrx/eslint-plugin默认支持.tsrxnpm run format/npm run format:check使用 Prettier tsrx/prettier-plugin格式化/校验默认支持.tsrx这意味着从开发、类型检查、Lint、格式化到生产构建的完整链路都已被模板配置好开箱即用。编辑器集成VS CodeTSRX 项目维护了基于 Volar 的TSRX Syntax for VS Code扩展在扩展市场搜索TSRX扩展 ID 前缀TSRX.即可安装。它提供.tsrx文件的默认语法高亮编译错误的实时诊断TypeScript 集成类型检查与自动补全。若你使用的是 VSCode 的衍生分支如 VSCodium该扩展同样发布在 Open VSX 上可直接安装。WebStorm / IntelliJ目前没有专用插件但可以通过TextMate bundle 语言服务器组合获得语法高亮、诊断与自动补全全局安装 TSRX 语言服务器npm install -g tsrx/language-server安装 JetBrains 插件市场的 LSP4IJ 插件。打开SettingsLanguages FrameworksLanguage Servers。点击新增一个语言服务器NameTSRXCommandtsrx-language-server --stdio在MappingsFile name patterns中点击添加映射File name pattern*.tsrxLanguage IDtsrx完成后.tsrx文件中即可看到诊断与自动补全。Sublime Text同样没有专用插件通过TextMate bundle LSP组合配置安装 TSRX 语言服务器npm install -g tsrx/language-server按Ctrl/CmdShiftP输入Install Package Control并回车重启 Sublime Text。再次按Ctrl/CmdShiftP输入Upgrade Package回车输入Package Control回车重启 Sublime Text。按Ctrl/CmdShiftP输入Install Package回车输入LSP回车重启 Sublime Text。按Ctrl/CmdShiftP输入Preferences: LSP Settings回车粘贴以下配置{ clients: { TSRX: { enabled: true, command: [tsrx-language-server, --stdio], selector: source.tsrx } } }完成后.tsrx文件中即可看到诊断与自动补全。TextMate bundle通用方案TSRX 项目维护了 TextMate 语法包为支持 TextMate 语法的编辑器如 WebStorm/IntelliJ、Sublime Text提供.tsrx语法高亮创建一个名为TSRX.tmbundle的目录。在TSRX.tmbundle内创建Syntaxes子目录。将 TSRX 项目中的tsrx.tmLanguage文件保存到Syntaxes目录该语法文件由 TSRX 项目在assets/TSRX.tmbundle/Syntaxes/下维护。按编辑器安装WebStorm/IntelliJ将 TSRX 项目中的info.plist文件保存到TSRX.tmbundle目录打开SettingsEditorTextMate Bundles点击选中TSRX.tmbundle目录所有 TSRX 文件即刻拥有语法高亮。Sublime Text打开PreferencesBrowse Packages把TSRX.tmbundle目录移入打开的文件夹在ViewSyntax中选择TSRX。获取帮助如果遇到问题可以加入 Ripple 官方的 Discord 服务器与社区实时交流在官方 GitHub 仓库的 Discussions 讨论板中提问。下一步完成本项目搭建后建议继续学习响应式与状态管理深入理解track、[]懒解构以及RippleArray/RippleObject等响应式原语相关介绍见 website/docs/introduction.md 的 Features 一节应用指南了解mount()客户端渲染与hydrate()SSR 水合等进阶用法见 website/docs/guide组件能力掌握 props、children、try挂起边界等组件特性配合内置的 Prettier/ESLint 支持形成完整的开发闭环。【免费下载链接】ripplethe elegant TypeScript UI framework项目地址: https://gitcode.com/GitHub_Trending/ripple25/ripple创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考