大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 Wasp

Wasp（Web 应用程序规范）是一个类似 Rails 的 React、Node.js 和 Prisma 框架，借助于该框架开发者可以快速构建应用程序并使用单个 CLI 命令进行应用部署。

Wasp 的典型优势包括：

• 快速入门：由于其表现力，开发者可以使用很少的简洁、一致的声明性代码从头开始创建和部署一个生产就绪的 Web 应用程序。
• 无样板代码：通过抽象出复杂的全栈功能，可以减少样板代码。 这意味着需要维护和理解的代码更少，同时也更容易升级。
• 无锁定：开发者可以在任何地方部署 Wasp 应用程序。 没有锁定特定的提供者，可以完全控制代码。

Wasp 的典型特征包括：

• 全栈身份验证
• ? RPC（客户端 <-> 服务器）
• 简单部署
• 支持 Job，电子邮件发送， 全栈类型安全等等

给定一个简单的 .wasp 配置文件（描述 Web 应用程序的高级详细信息）和 .js(x)/.css 等特定逻辑的源文件，Wasp 编译器会生成 Web 应用程序的完整源代码，包括：前端、后端和应用部署。这种独特的方法使 Wasp 变得聪明并赋予了它独特的超能力。

目前 Wasp 在 Github 上通过 MIT 协议开源，有超过 3.5k 的 star，是一个值得关注的前端开源项目。

如何使用 Wasp

通过简单的 Wasp 配置文件，开发者可以用来描述 Web 应用程序的高级详细信息：

// file: main.wasp
app todoApp {
  title: "ToDo App",
   // 在浏览器选项卡中可见
  wasp: { version: "^0.11.0" },
  auth: {
    // 开箱即用的全栈身份验证
    userEntity: User, methods: { email: {...} }
  }
}
route RootRoute { path: "/", to: MainPage }
page MainPage {
  authRequired: true,
  // 限制对已登录用户的访问。
  component: import Main from "@client/Main.tsx"
  // React组件
}
query getTasks {
  fn: import { getTasks } from "@server/tasks.js",
  //  Node.js 代码
  entities: [Task]
  // 自动缓存失效
}
entity Task {=psl
// Prisma数据模型
    id          Int     @id @default(autoincrement())
    description String
    isDone      Boolean @default(false)
psl=}

在 React / Node.js / Prisma 中编写的其余代码只需从 .wasp 文件中引用即可。在 Wasp 配置中定义应用程序将自动获得以下能力：

• 使用 Auth UI 组件登录和注册，
• 全栈式安全，
• 电子邮件发送，
• 异步处理 Job，
• React Query 支持数据获取，
• 安全最佳实践等等

开发者不需要为这些功能编写任何代码，Wasp 会自动处理，同时 Wasp 还会维护代码，而开发者不必担心跟上最新的安全性，最佳实践。 随着 Wasp 的更新，应用程序也会同步更新。

本文总结

本文主要和大家介绍 Wasp，即一个类似 Rails 的 React、Node.js 和 Prisma 框架，借助于该框架开发者可以快速构建应用程序并使用单个 CLI 命令进行应用部署。相信通过本文的阅读，大家对 Wasp 会有一个初步的了解。

因为篇幅有限，关于 Wasp 的更多用法和特性文章并没有过多展开，如果有兴趣，可以在我的主页继续阅读，同时文末的参考资料提供了大量优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏，您的支持是我不断创作的动力。

参考资料

https://wasp-lang.dev/

https://github.com/wasp-lang/wasp

https://wasp-lang.dev/docs

https://www.ycombinator.com/launches/HbQ-wasp-beta-develop-full-stack-web-apps-in-react-node-js-without-boilerplate

https://blog.openreplay.com/a-dive-into-wasp/