Sapper介绍

qimoe 发布于 2 个月前

开始之前

Sapper处于早期开发阶段,在我们发布1.0版之前,某些功能可能会发生变化。本文档正在陆续编纂中。如果您遇到困难,请在Discord聊天室中寻求帮助。

请参阅迁移指南以获取从旧版本升级的帮助。

什么是Sapper?

Sapper是用于构建超高性能Web应用程序的框架。有两个基本概念:

  • 您应用的每个页面都是一个Svelte组件

  • 您可以通过将文件添加到src/routes项目目录中来创建页面。这些内容将通过服务器渲染,以便用户首次访问您的应用程序时尽快完成渲染并展示,然后由客户端应用程序接管。

使用所有现代最佳实践来构建应用程序-代码分离,脱机支持,带有客户端激活的服务器渲染——这通常非常复杂。Sapper为您完成所有无聊的工作,以便您可以只需要关注创意部分。

您无需了解Svelte即可了解本指南的其余部分,但了解过后会有所帮助。简而言之,这是一个UI框架,可将您的组件编译为高度优化的原始JavaScript。阅读介绍性博客文章教程以了解更多信息。

为什么叫Sapper?

在战争中,建造桥梁,修路,清理雷区并进行拆除的士兵(都在战斗条件下进行)被称为工兵(Sapper)

对于网络开发人员来说,风险通常比战斗工程师要低,但是我们面临着自己的敌对环境:设备动力不足,网络连接不良以及前端工程固有的复杂性。Sapper,这是的 velte 应用的捷径 ,是你的勇敢、忠诚的盟友。

与Next.js的比较

Next.jsVercel(以前是ZEIT)的React框架,也是Sapper的灵感来源。但是,有一些明显的区别:

  • Sapper由Svelte而非React提供支持,因此速度更快且您的应用更小。

  • 除了Pages之外,您还可以在目录中创建服务器路由src/routes。例如,这使得添加JSON API(例如为该页面提供动力的JSON API)非常容易(尝试访问/docs.json

  • 链接只是<a>元素,而不是特定于框架的<Link>组件。举例来说,这意味着尽管位于markdown区域内,但其中的链接仍可以按预期与路由一起生效(nuxtjs和nextjs里边的链接组件都是独立使用,所以在Html和markdown渲染的页面中无法提供例如预加载等高级特性,而在Sapper中却是基本的a元素,并且支持了更多的高级特性)。

入门

开始构建Sapper应用程序的最简单方法是使用degit克隆sapper -template 存储库

npx degit "sveltejs/sapper-template#rollup" my-app
# or: npx degit "sveltejs/sapper-template#webpack" my-app
cd my-app
npm install
npm run dev

这将在my-app目录中搭建一个新项目,安装其依赖项,并在localhost:3000上启动服务器。尝试编辑文件以了解一切工作原理–您可能无需费心阅读本指南的其余部分!