尧图网站建设 
Wasp 框架核心指南Spec 驱动的全栈 Web 应用开发与编译原理【免费下载链接】waspThe batteries-included full-stack framework for the AI era. Develop JS/TS web apps (React, Node.js, and Prisma) using declarative code that abstracts away complex full-stack features like auth, background jobs, RPC, email sending, end-to-end type safety, single-command deployment, and more.项目地址: https://gitcode.com/GitHub_Trending/wa/wasp导读Wasp 是一个电池全配batteries-included的全栈 Web 应用框架它通过一个声明式的main.wasp.tsSpec 文件把 React 前端、Node.js 后端与 Prisma 数据库粘合成一个可编译、可部署的完整应用。本篇指南基于 Wasp 官方文档的 Introduction 章节展开并结合当前仓库中的真实示例源码为你讲清 Wasp 的设计哲学、编译工作原理、Operations 与页面声明的完整写法以及什么场景适合/不适合使用它。读完本文你将能理解 Wasp 的核心心智模型并具备阅读和编写 Wasp 应用Spec JS/TS 代码的实战能力。需要安装步骤的读者请直接参考 Quick Start 快速开始本文聚焦框架原理与代码形态。Wasp 是什么一个构建现代 Web 应用的编译型全栈工具Wasp 是构建全栈 Web 应用的一种有主见opinionated的方式。一个 Web 应用的三大组成部分——客户端Client / 前端、服务端Server / 后端和数据库Database——都由 Wasp 统一接管客户端基于 React负责 UI 组件与页面服务端基于 Node.js负责查询Query、操作Action等业务逻辑数据库基于 Prisma负责数据建模与访问。Wasp 的定位不是试图一次搞定所有事情而是聚焦于连接技术栈各个部分客户端、服务端、数据库、部署时产生的复杂性。这也是它与普通前端框架或后端框架最本质的差异它解决的是胶水问题而不是重新发明一套语言或运行时。与现有技术栈良好配合Wasp 底层使用React、Node.js和Prisma并依赖它们来定义 Web 组件与服务端查询/操作。这意味着如果你已经熟悉 React 组件写法前端的开发体验与原生 React 一致如果你熟悉 Node.js 函数Query/Action 就是普通的异步函数如果你熟悉 Prisma Schema Language数据模型的定义方式完全相同。从仓库中可以找到大量佐证例如 ask-the-documents 示例的 main.wasp.ts 与 TodoApp 示例的 main.wasp.ts 都以wasp.sh/spec的app()声明整个应用而业务代码如 queries.js就是普通的 Node.js 异步函数。Wasp 不要求你换语言、换框架只要求你按照它的声明方式来组织这些既有技术。Wasp 的秘密武器编译器Wasp 的核心是一个编译器Compiler。它接收两份输入Wasp Spec——即项目根目录下的main.wasp.ts文件用声明式语法描述应用的是什么你的 JavaScript / TypeScript 代码——即src/目录下由你手写的组件、查询、操作实现。编译器对这两份输入进行加工最终输出三份产物客户端应用代码、服务端应用代码以及部署代码。其整体工作流程如下图片来源本文档所在仓库的 web/static/img/lp/wasp-compilation-diagram.png。左侧是开发者编写的部分Wasp 文件与 JS/JSX 代码右侧是由 Wasp 生成的部分前端、后端、部署配置。拥有一个能理解你代码的编译器这件事最酷的地方在于它可以在编译期为你的应用注入大量基础设施能力而你一行都不用写。只要在 Wasp 文件里声明你的应用就能免费获得登录注册Auth UI 组件——用户名密码、Google 等社交登录的完整 UI 与后端流程全栈类型安全full-stack type safety——客户端调用服务端操作时请求/响应类型自动推导邮件发送e-mail sending——内置邮件发送器的抽象异步处理任务async processing jobs——后台作业的调度与执行React Query 驱动的数据获取——查询的缓存、失效与加载状态管理安全最佳实践——认证、会话、权限等安全逻辑由 Wasp 维护。更重要的是Wasp 会持续维护这些代码。你无需手工跟进最新的安全最佳实践随着 Wasp 的版本更新你的应用也会自动受益。这正是编译器理解你的代码带来的复利效应。从仓库看编译器的输入面想要直观理解 Spec 文件能声明哪些能力可以看仓库中最全的示例 examples/kitchen-sink/main.wasp.ts。该示例在一个 Spec 中同时声明了auth认证配置、webSocketWebSocket 服务server下的setupFn、middlewareConfigFn、envValidationSchema服务端中间件与环境变量校验client下的rootComponent、setupFn、envValidationSchema客户端根组件与配置emailSenderSMTP 邮件发送器spec数组中展开的authSpec、operationsSpec、jobsSpec、apisSpec、crudSpec、streamingSpec等各功能模块。这印证了文档的核心论断Wasp 通过一个声明式的 Spec 文件把连接技术栈的复杂性全部交给编译器消化。Wasp 的代码长什么样Recipe 分享应用实战文档用一个经典的创建并分享食谱Recipes应用完整演示了 Wasp 应用的四个核心构件应用声明Spec→ 数据模型Prisma Schema→ 操作Operations→ 页面Route Page。下面我们完整走一遍并结合仓库中的 TodoApp 真实示例逐一对齐。第一步在main.wasp.ts中声明应用main.wasp.ts是整个应用的中心 Spec 文件在这里从高层描述应用。给应用起个标题并立即开启用户名密码的全栈认证import { app } from wasp.sh/spec export default app({ name: RecipeApp, wasp: { version: {latestWaspVersion} }, title: My Recipes, head: [link relicon href/favicon.ico /], auth: { methods: { usernameAndPassword: {} }, onAuthFailedRedirectTo: /login, userEntity: User, }, // ... })各字段含义如下字段说明name应用的机器可读名称会用于生成项目内部标识wasp.version声明本应用所依赖的 Wasp 版本。仓库中的真实示例如 TodoApp使用0.26.0title浏览器标题栏显示的应用名称head注入到 HTMLhead的标签列表例如 favicon、manifest 等auth.methods启用哪些认证方式如usernameAndPassword、google等auth.onAuthFailedRedirectTo未认证用户访问受保护页面时重定向到的路径auth.userEntity认证所绑定的用户数据模型在schema.prisma中定义从仓库的真实应用看这一写法与文档示例完全一致ask-the-documents 示例 中同样出现了head、auth.userEntity、auth.methodsGoogle 登录与onAuthFailedRedirectTokitchen-sink 示例 还展示了head里注入 manifest 的写法。第二步在schema.prisma中定义数据模型Wasp 理解并直接使用schema.prisma文件中的数据模型基于 Prisma Schema Language 定义。本应用需要 User 与 User 拥有的 Recipe... // Data models are defined using Prisma Schema Language. model User { id Int id default(autoincrement()) recipes Recipe[] } model Recipe { id Int id default(autoincrement()) title String description String? userId Int user User relation(fields: [userId], references: [id]) }需要特别说明Wasp 对schema.prisma有一些约定要求。对照仓库中 TodoApp 的 schema.prisma 可以看到datasource 的provider可以是sqlite本地开发或postgresql生产url env(DATABASE_URL)是 Wasp 的强制约定数据库连接串必须来自该环境变量必须保留generator client { provider prisma-client-js }生成器Wasp 生成的客户端代码依赖它认证开启时User模型是必须的Wasp 会自动为它注入认证相关的字段。第三步定义 OperationsQuery 与 Action接下来定义怎么操作这些数据。Operations 本质上是在服务端执行的 Node.js 函数但借助 Wasp客户端可以非常轻松地调用它们。本例定义了一个 QuerygetRecipes和一个 ActionaddRecipe。首先在main.wasp.ts中声明这两个 Operation让 Wasp知道它们并为其注入能力类型安全、缓存失效、权限上下文等import { action, app, query } from wasp.sh/spec import { getRecipes, addRecipe } from ./src/recipe/operations with { type: ref } export default app({ // ... spec: [ // ... // Queries have automatic cache invalidation and are type-safe. query(getRecipes, { entities: [Recipe] }), // Actions are type-safe and can be used to perform side-effects. action(addRecipe, { entities: [Recipe] }), ], })然后用 JavaScript 或 TypeScript 实现它们这里以 TypeScript 展示 Query 的实现// Wasp generates the types for you. import { type GetRecipes } from wasp/server/operations; import { type Recipe } from wasp/entities; export const getRecipes: GetRecipes{}, Recipe[] async (_args, context) { return context.entities.Recipe.findMany( // Prisma query { where: { user: { id: context.user.id } } } ); }; export const addRecipe ...几个值得注意的关键点wasp/server/operations与wasp/entities是 Wasp 生成的模块路径其中的类型由编译器根据你的 Spec 与 Schema 自动生成——这就是全栈类型安全的落点GetRecipes{}, Recipe[]中的输入参数类型和返回值类型都是生成并校验的context.entities.Recipe是 Wasp 注入的 Prisma Client你可以直接使用 Prisma 的查询 APIfindMany、create、updateMany等context.user是当前认证用户由 Wasp 在认证开启后自动注入。对照仓库中 TodoApp 的 queries.js 可以看到完全相同的模式context.entities.Task.findMany({ where: { user: { id: context.user.id } } })并在未登录时throw new HttpError(401)。第四步声明路由与页面并在 React 中调用 Operations最后创建应用首页。先在main.wasp.ts中声明 Route 与 Pageimport { app, page, route } from wasp.sh/spec import { HomePage } from ./src/pages/HomePage with { type: ref } export default app({ // ... spec: [ // ... route(HomeRoute, /, page(HomePage, { authRequired: true, // Will send user to /login if not authenticated. }) ), ], })然后把它实现为一个 React 组件内部调用前面定义的 Operationsimport { useQuery, getRecipes } from wasp/client/operations import { type User } from wasp/entities export function HomePage({ user }: { user: User }) { // Due to full-stack type safety, recipes will be of type Recipe[] here. const { data: recipes, isLoading } useQuery(getRecipes) // Calling our query here! if (isLoading) { return divLoading.../div } return ( div h1Recipes/h1 ul {recipes ? recipes.map((recipe) ( li key{recipe.id} div{recipe.title}/div div{recipe.description}/div /li )) : No recipes defined yet!} /ul /div ) }这里的useQuery正是 Wasp 内置的React Query 封装它把getRecipes包装成带缓存、加载态与自动失效的数据获取 Hook返回值recipes由于类型安全会自动推导为Recipe[]。至此一个带认证、带数据库、带页面展示的完整功能已经闭环。与仓库真实示例对照TodoApp文档中的 Recipes 示例与仓库内 examples/tutorials/TodoApp 完整示例几乎一一对应可以作为加深理解的第二案例TodoApp 的 main.wasp.ts 声明了usernameAndPassword认证、/login与/signup路由、以及query(getTasks)、action(createTask)、action(updateTask)三个 Operationqueries.js 与 actions.js 展示了带HttpError(401)校验的服务端实现schema.prisma 展示了 User 与 Task 的一对多关系。说明上面为了简洁跳过了/login与/signup页面的定义。借助 Wasp 的 Auth UI 功能这两页的搭建非常简单详见 认证相关文档。至此一个完整功能的 Wasp 应用就成形了。若想按步骤走一遍 Wasp 的核心特性文档推荐跟随 Todo App 教程该教程使用的就是上述 TodoApp 示例的完整源码。何时使用 WaspWasp 解决的是典型 Web 应用框架面对的同一类核心问题从设计上讲它看起来、游起来、叫起来都像一个 Web 应用框架鸭子测试。最适合的场景构建全栈 Web 应用例如 Airbnb、Asana 这类形态的产品快速启动一个自带行业最佳实践的 Web 应用——认证、类型安全、数据获取等开箱即用与现代 Web 开发技术栈配合使用——目前官方支持 React 与 Node.js。应避免的场景构建静态/展示型网站presentational websites——这类场景不需要全栈能力Wasp 的编译器与运行时并不匹配当作无代码no-code解决方案——Wasp 仍需你编写 React 组件与服务端逻辑它不是拖拽式生成器期望它成为单一语言解决一切的工具——Wasp 有明确的技术栈边界React Node.js Prisma并非万能的统一方案。Wasp 是一个 Spec 驱动的框架Wasp 不符合人们对 Web 应用框架的典型预期它不只是一组库。你在main.wasp.tsSpec 文件中描述应用编译器再结合你的 React、Node.js、Prisma 代码生成应用的整体结构与胶水代码。这种 Spec 驱动spec-driven的架构让 Wasp 可以聚焦于唯一目的用更少的代码、更少的技术栈知识构建现代 Web 应用。文档中的表述是10x less code我们可以将其理解为一种方向性主张——核心机制在于所有跨层连接认证、路由、数据访问、部署的样板代码都由编译器产出开发者在 Spec 中声明意图在 JS/TS 中只写业务本身。如何上手三步创建一个 Wasp 应用虽然本文聚焦原理但结合 Quick Start 与 创建项目教程你可以很快把上面讲的原理跑起来安装 CLI需要 Node.js 24.14.1 且 npm 可用npm i -g wasp.sh/wasp-clilatest创建新应用-t minimal使用最小模板适合从零实现wasp new TodoApp -t minimal启动开发服务器——Wasp 会同时拉起前端、后端与数据库浏览器打开http://localhost:3000cd TodoApp wasp startWasp 同时支持 JavaScript 与 TypeScript两种语言可以在项目中自由混用这一点在 TodoApp 的 JS 版examples/tutorials/TodoApp与 TS 版examples/tutorials/TodoAppTs中都有完整对照。遇到奇怪报错时wasp clean相当于 Wasp 版的重启大法。深入阅读Todo App 教程逐步走完 Wasp 最核心的特性编辑器配置配置 VS Code 等编辑器以获得完整的 Wasp 开发体验仓库内更多真实应用示例examples/kitchen-sink、examples/ask-the-documents、examples/waspello 等覆盖认证、WebSocket、后台任务、邮件发送、流式响应等进阶能力。【免费下载链接】waspThe batteries-included full-stack framework for the AI era. Develop JS/TS web apps (React, Node.js, and Prisma) using declarative code that abstracts away complex full-stack features like auth, background jobs, RPC, email sending, end-to-end type safety, single-command deployment, and more.项目地址: https://gitcode.com/GitHub_Trending/wa/wasp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Wasp 框架核心指南：Spec 驱动的全栈 Web 应用开发与编译原理
Wasp 框架核心指南Spec 驱动的全栈 Web 应用开发与编译原理【免费下载链接】waspThe batteries-included full-stack framework for the AI era. Develop JS/TS web apps (React, Node.js, and Prisma) using declarative code that abstracts away complex full-stack features like auth, background jobs, RPC, email sending, end-to-end type safety, single-command deployment, and more.项目地址: https://gitcode.com/GitHub_Trending/wa/wasp导读Wasp 是一个电池全配batteries-included的全栈 Web 应用框架它通过一个声明式的main.wasp.tsSpec 文件把 React 前端、Node.js 后端与 Prisma 数据库粘合成一个可编译、可部署的完整应用。本篇指南基于 Wasp 官方文档的 Introduction 章节展开并结合当前仓库中的真实示例源码为你讲清 Wasp 的设计哲学、编译工作原理、Operations 与页面声明的完整写法以及什么场景适合/不适合使用它。读完本文你将能理解 Wasp 的核心心智模型并具备阅读和编写 Wasp 应用Spec JS/TS 代码的实战能力。需要安装步骤的读者请直接参考 Quick Start 快速开始本文聚焦框架原理与代码形态。Wasp 是什么一个构建现代 Web 应用的编译型全栈工具Wasp 是构建全栈 Web 应用的一种有主见opinionated的方式。一个 Web 应用的三大组成部分——客户端Client / 前端、服务端Server / 后端和数据库Database——都由 Wasp 统一接管客户端基于 React负责 UI 组件与页面服务端基于 Node.js负责查询Query、操作Action等业务逻辑数据库基于 Prisma负责数据建模与访问。Wasp 的定位不是试图一次搞定所有事情而是聚焦于连接技术栈各个部分客户端、服务端、数据库、部署时产生的复杂性。这也是它与普通前端框架或后端框架最本质的差异它解决的是胶水问题而不是重新发明一套语言或运行时。与现有技术栈良好配合Wasp 底层使用React、Node.js和Prisma并依赖它们来定义 Web 组件与服务端查询/操作。这意味着如果你已经熟悉 React 组件写法前端的开发体验与原生 React 一致如果你熟悉 Node.js 函数Query/Action 就是普通的异步函数如果你熟悉 Prisma Schema Language数据模型的定义方式完全相同。从仓库中可以找到大量佐证例如 ask-the-documents 示例的 main.wasp.ts 与 TodoApp 示例的 main.wasp.ts 都以wasp.sh/spec的app()声明整个应用而业务代码如 queries.js就是普通的 Node.js 异步函数。Wasp 不要求你换语言、换框架只要求你按照它的声明方式来组织这些既有技术。Wasp 的秘密武器编译器Wasp 的核心是一个编译器Compiler。它接收两份输入Wasp Spec——即项目根目录下的main.wasp.ts文件用声明式语法描述应用的是什么你的 JavaScript / TypeScript 代码——即src/目录下由你手写的组件、查询、操作实现。编译器对这两份输入进行加工最终输出三份产物客户端应用代码、服务端应用代码以及部署代码。其整体工作流程如下图片来源本文档所在仓库的 web/static/img/lp/wasp-compilation-diagram.png。左侧是开发者编写的部分Wasp 文件与 JS/JSX 代码右侧是由 Wasp 生成的部分前端、后端、部署配置。拥有一个能理解你代码的编译器这件事最酷的地方在于它可以在编译期为你的应用注入大量基础设施能力而你一行都不用写。只要在 Wasp 文件里声明你的应用就能免费获得登录注册Auth UI 组件——用户名密码、Google 等社交登录的完整 UI 与后端流程全栈类型安全full-stack type safety——客户端调用服务端操作时请求/响应类型自动推导邮件发送e-mail sending——内置邮件发送器的抽象异步处理任务async processing jobs——后台作业的调度与执行React Query 驱动的数据获取——查询的缓存、失效与加载状态管理安全最佳实践——认证、会话、权限等安全逻辑由 Wasp 维护。更重要的是Wasp 会持续维护这些代码。你无需手工跟进最新的安全最佳实践随着 Wasp 的版本更新你的应用也会自动受益。这正是编译器理解你的代码带来的复利效应。从仓库看编译器的输入面想要直观理解 Spec 文件能声明哪些能力可以看仓库中最全的示例 examples/kitchen-sink/main.wasp.ts。该示例在一个 Spec 中同时声明了auth认证配置、webSocketWebSocket 服务server下的setupFn、middlewareConfigFn、envValidationSchema服务端中间件与环境变量校验client下的rootComponent、setupFn、envValidationSchema客户端根组件与配置emailSenderSMTP 邮件发送器spec数组中展开的authSpec、operationsSpec、jobsSpec、apisSpec、crudSpec、streamingSpec等各功能模块。这印证了文档的核心论断Wasp 通过一个声明式的 Spec 文件把连接技术栈的复杂性全部交给编译器消化。Wasp 的代码长什么样Recipe 分享应用实战文档用一个经典的创建并分享食谱Recipes应用完整演示了 Wasp 应用的四个核心构件应用声明Spec→ 数据模型Prisma Schema→ 操作Operations→ 页面Route Page。下面我们完整走一遍并结合仓库中的 TodoApp 真实示例逐一对齐。第一步在main.wasp.ts中声明应用main.wasp.ts是整个应用的中心 Spec 文件在这里从高层描述应用。给应用起个标题并立即开启用户名密码的全栈认证import { app } from wasp.sh/spec export default app({ name: RecipeApp, wasp: { version: {latestWaspVersion} }, title: My Recipes, head: [link relicon href/favicon.ico /], auth: { methods: { usernameAndPassword: {} }, onAuthFailedRedirectTo: /login, userEntity: User, }, // ... })各字段含义如下字段说明name应用的机器可读名称会用于生成项目内部标识wasp.version声明本应用所依赖的 Wasp 版本。仓库中的真实示例如 TodoApp使用0.26.0title浏览器标题栏显示的应用名称head注入到 HTMLhead的标签列表例如 favicon、manifest 等auth.methods启用哪些认证方式如usernameAndPassword、google等auth.onAuthFailedRedirectTo未认证用户访问受保护页面时重定向到的路径auth.userEntity认证所绑定的用户数据模型在schema.prisma中定义从仓库的真实应用看这一写法与文档示例完全一致ask-the-documents 示例 中同样出现了head、auth.userEntity、auth.methodsGoogle 登录与onAuthFailedRedirectTokitchen-sink 示例 还展示了head里注入 manifest 的写法。第二步在schema.prisma中定义数据模型Wasp 理解并直接使用schema.prisma文件中的数据模型基于 Prisma Schema Language 定义。本应用需要 User 与 User 拥有的 Recipe... // Data models are defined using Prisma Schema Language. model User { id Int id default(autoincrement()) recipes Recipe[] } model Recipe { id Int id default(autoincrement()) title String description String? userId Int user User relation(fields: [userId], references: [id]) }需要特别说明Wasp 对schema.prisma有一些约定要求。对照仓库中 TodoApp 的 schema.prisma 可以看到datasource 的provider可以是sqlite本地开发或postgresql生产url env(DATABASE_URL)是 Wasp 的强制约定数据库连接串必须来自该环境变量必须保留generator client { provider prisma-client-js }生成器Wasp 生成的客户端代码依赖它认证开启时User模型是必须的Wasp 会自动为它注入认证相关的字段。第三步定义 OperationsQuery 与 Action接下来定义怎么操作这些数据。Operations 本质上是在服务端执行的 Node.js 函数但借助 Wasp客户端可以非常轻松地调用它们。本例定义了一个 QuerygetRecipes和一个 ActionaddRecipe。首先在main.wasp.ts中声明这两个 Operation让 Wasp知道它们并为其注入能力类型安全、缓存失效、权限上下文等import { action, app, query } from wasp.sh/spec import { getRecipes, addRecipe } from ./src/recipe/operations with { type: ref } export default app({ // ... spec: [ // ... // Queries have automatic cache invalidation and are type-safe. query(getRecipes, { entities: [Recipe] }), // Actions are type-safe and can be used to perform side-effects. action(addRecipe, { entities: [Recipe] }), ], })然后用 JavaScript 或 TypeScript 实现它们这里以 TypeScript 展示 Query 的实现// Wasp generates the types for you. import { type GetRecipes } from wasp/server/operations; import { type Recipe } from wasp/entities; export const getRecipes: GetRecipes{}, Recipe[] async (_args, context) { return context.entities.Recipe.findMany( // Prisma query { where: { user: { id: context.user.id } } } ); }; export const addRecipe ...几个值得注意的关键点wasp/server/operations与wasp/entities是 Wasp 生成的模块路径其中的类型由编译器根据你的 Spec 与 Schema 自动生成——这就是全栈类型安全的落点GetRecipes{}, Recipe[]中的输入参数类型和返回值类型都是生成并校验的context.entities.Recipe是 Wasp 注入的 Prisma Client你可以直接使用 Prisma 的查询 APIfindMany、create、updateMany等context.user是当前认证用户由 Wasp 在认证开启后自动注入。对照仓库中 TodoApp 的 queries.js 可以看到完全相同的模式context.entities.Task.findMany({ where: { user: { id: context.user.id } } })并在未登录时throw new HttpError(401)。第四步声明路由与页面并在 React 中调用 Operations最后创建应用首页。先在main.wasp.ts中声明 Route 与 Pageimport { app, page, route } from wasp.sh/spec import { HomePage } from ./src/pages/HomePage with { type: ref } export default app({ // ... spec: [ // ... route(HomeRoute, /, page(HomePage, { authRequired: true, // Will send user to /login if not authenticated. }) ), ], })然后把它实现为一个 React 组件内部调用前面定义的 Operationsimport { useQuery, getRecipes } from wasp/client/operations import { type User } from wasp/entities export function HomePage({ user }: { user: User }) { // Due to full-stack type safety, recipes will be of type Recipe[] here. const { data: recipes, isLoading } useQuery(getRecipes) // Calling our query here! if (isLoading) { return divLoading.../div } return ( div h1Recipes/h1 ul {recipes ? recipes.map((recipe) ( li key{recipe.id} div{recipe.title}/div div{recipe.description}/div /li )) : No recipes defined yet!} /ul /div ) }这里的useQuery正是 Wasp 内置的React Query 封装它把getRecipes包装成带缓存、加载态与自动失效的数据获取 Hook返回值recipes由于类型安全会自动推导为Recipe[]。至此一个带认证、带数据库、带页面展示的完整功能已经闭环。与仓库真实示例对照TodoApp文档中的 Recipes 示例与仓库内 examples/tutorials/TodoApp 完整示例几乎一一对应可以作为加深理解的第二案例TodoApp 的 main.wasp.ts 声明了usernameAndPassword认证、/login与/signup路由、以及query(getTasks)、action(createTask)、action(updateTask)三个 Operationqueries.js 与 actions.js 展示了带HttpError(401)校验的服务端实现schema.prisma 展示了 User 与 Task 的一对多关系。说明上面为了简洁跳过了/login与/signup页面的定义。借助 Wasp 的 Auth UI 功能这两页的搭建非常简单详见 认证相关文档。至此一个完整功能的 Wasp 应用就成形了。若想按步骤走一遍 Wasp 的核心特性文档推荐跟随 Todo App 教程该教程使用的就是上述 TodoApp 示例的完整源码。何时使用 WaspWasp 解决的是典型 Web 应用框架面对的同一类核心问题从设计上讲它看起来、游起来、叫起来都像一个 Web 应用框架鸭子测试。最适合的场景构建全栈 Web 应用例如 Airbnb、Asana 这类形态的产品快速启动一个自带行业最佳实践的 Web 应用——认证、类型安全、数据获取等开箱即用与现代 Web 开发技术栈配合使用——目前官方支持 React 与 Node.js。应避免的场景构建静态/展示型网站presentational websites——这类场景不需要全栈能力Wasp 的编译器与运行时并不匹配当作无代码no-code解决方案——Wasp 仍需你编写 React 组件与服务端逻辑它不是拖拽式生成器期望它成为单一语言解决一切的工具——Wasp 有明确的技术栈边界React Node.js Prisma并非万能的统一方案。Wasp 是一个 Spec 驱动的框架Wasp 不符合人们对 Web 应用框架的典型预期它不只是一组库。你在main.wasp.tsSpec 文件中描述应用编译器再结合你的 React、Node.js、Prisma 代码生成应用的整体结构与胶水代码。这种 Spec 驱动spec-driven的架构让 Wasp 可以聚焦于唯一目的用更少的代码、更少的技术栈知识构建现代 Web 应用。文档中的表述是10x less code我们可以将其理解为一种方向性主张——核心机制在于所有跨层连接认证、路由、数据访问、部署的样板代码都由编译器产出开发者在 Spec 中声明意图在 JS/TS 中只写业务本身。如何上手三步创建一个 Wasp 应用虽然本文聚焦原理但结合 Quick Start 与 创建项目教程你可以很快把上面讲的原理跑起来安装 CLI需要 Node.js 24.14.1 且 npm 可用npm i -g wasp.sh/wasp-clilatest创建新应用-t minimal使用最小模板适合从零实现wasp new TodoApp -t minimal启动开发服务器——Wasp 会同时拉起前端、后端与数据库浏览器打开http://localhost:3000cd TodoApp wasp startWasp 同时支持 JavaScript 与 TypeScript两种语言可以在项目中自由混用这一点在 TodoApp 的 JS 版examples/tutorials/TodoApp与 TS 版examples/tutorials/TodoAppTs中都有完整对照。遇到奇怪报错时wasp clean相当于 Wasp 版的重启大法。深入阅读Todo App 教程逐步走完 Wasp 最核心的特性编辑器配置配置 VS Code 等编辑器以获得完整的 Wasp 开发体验仓库内更多真实应用示例examples/kitchen-sink、examples/ask-the-documents、examples/waspello 等覆盖认证、WebSocket、后台任务、邮件发送、流式响应等进阶能力。【免费下载链接】waspThe batteries-included full-stack framework for the AI era. Develop JS/TS web apps (React, Node.js, and Prisma) using declarative code that abstracts away complex full-stack features like auth, background jobs, RPC, email sending, end-to-end type safety, single-command deployment, and more.项目地址: https://gitcode.com/GitHub_Trending/wa/wasp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考