使用 Svelte 和 Sapper 静态生成网站

2025-06-07

使用 Svelte 和 Sapper 静态生成网站

本文是我关于 Svelte 的前三篇文章的第一部分。第二部分将更详细地讨论Svelte 单文件组件。第三部分将展示如何将 TailwindCSS 与 Svelte 和 Sapper 结合使用。

在本文中，我们将为 Svelte 配置 VS Code，安装 Sapper 的演示应用程序，讨论项目结构，运行 E2E 测试，静态构建演示应用程序并将其部署在 Netlify 上。

版本：
Svelte：3.16.7
Sapper：0.27.9（！早期状态）

介绍

在本文中，我们将介绍如何使用Svelte或更具体地说是其配套框架Sapper来搭建一个静态生成网站。我目前正在使用这个框架从头开始构建我的作品集网页。目前未完成版本的代码可以在我的 GitHub Sapper 仓库中找到。

什么是 Svelte？

Svelte是一款用于创建高性能网站的免费开源软件。与React和Vue相比，Svelte 在构建应用程序的编译步骤中已经完成了很多工作。而 React 和 Vue 则在浏览器中完成了很多类似的任务。我已经试用过 Svelte，并且认为它值得一试，或者至少值得考虑一下。

我不会进一步探讨 Svelte 的技术细节。贡献者们比我更了解他们。他们的博客上有很多很棒的资料，可以帮助你了解这个框架的工作原理。他们还提供了一个详细的教程。Rich Harris（ rollup和 Svelte背后的推动者）关于“重新思考响应性”的演讲，解释了你需要了解的关于 Svelte 背景的一切。去看看吧！阅读这部纪录片是成为更优秀开发者的关键 🙂。

Sapper 是什么？

Sapper是 Svelte 的伴侣，就像Nuxt是 Vue 的伴侣，Next是 React 的伴侣一样。它包括

  • 服务器端渲染
  • 自动路由（使用“routes”目录，类似于 Nuxt 和 Next 的“pages”目录）
  • 代码分割
  • 离线支持（使用服务工作者）

...因此能够创建静态生成的页面。

VS Code 支持

在创建演示应用程序之前，应该先为 Svelte 配置 IDE。正如下文更详细地介绍的那样，.svelte 文件的组织方式与纯 .html 文件类似。要启用语法高亮，请在 VS Code 中打开“设置 (JSON)”。操作方法是：点击Cmd + Shift + P打开“命令面板”，然后打开“首选项：打开设置 (JSON)”，并添加以下设置：

"files.associations": {
  "*.svelte": "html"
}
Enter fullscreen mode Exit fullscreen mode

还有一些 Svelte 扩展可用。我建议安装Svelte 语言支持和Svelte 3 Snippets扩展。

创建新项目

让我们深入研究一下。要创建新项目，请在终端中执行以下命令：

npx degit "sveltejs/sapper-template#rollup" sapper-app
# or npx degit "sveltejs/sapper-template#webpack" sapper-app
cd sapper-app
npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

项目结构

如果你已经使用过 Nuxt 或 Next，那么你应该熟悉它的文件夹结构。示例应用程序的文件夹结构如下：

  • ./__sapper__其中包括生产、开发和静态模式的构建文件
  • ./cypress用于端到端测试
  • ./node_modules
  • ./src其中包括源文件
    • ./components其中包括单个文件组件
    • ./node_modules
    • ./routes其中包括名称代表 URL 路径的页面组件（例如index.svelte或about.svelte）和包含骨架的布局文件（例如 _layout.svelte 或 _error.svelte ）
    • client.js，客户端入口
    • server.js，服务器条目
    • service-worker.js
    • template.html，其中包含每个页面的包装 HTML 内容
  • ./static对于资产
  • package.json
  • package-lock.json
  • README.md
  • [rollup|webpack].config.js

大多数需要开发的内容都位于目录src/components和中src/routes。在这两个文件夹中，你都可以找到 .svelte 文件。关于单文件组件的更详细说明将在第二部分中提供，本文将跳过该部分。

然而，Sapper 最有趣的组件是布局和页面组件。让我们仔细看看它们。

布局骨架

布局组件构建了不同页面的 HTML 封装。它使得添加页眉、导航、页脚和其他需要放在多个页面上的组件变得更容易。在下面的示例中，我们看到一个包含页眉、页脚和主要内容的框架。页面内容将通过页面组件提供。它们的内容将在未命名的 中渲染<slot></slot>。

<script>
  import Header from '../components/Header.svelte';
  import Footer from '../components/Footer.svelte';
</script>

<style>
  main {
    margin: 0 auto;
    max-width: 1200px;
  }
</style>

<Header></Header>
<main>
  <slot></slot>
</main>
<Footer></Footer>
Enter fullscreen mode Exit fullscreen mode

有关子组件命名规范的更多详细信息，请参阅第二部分。请注意，尽管Header和Footer已被赋予纯 HTML 标签的名称，但我们仍然可以使用它们作为名称。这是因为 Svelte 组件名称区分大小写。使用 PascalCase 命名法，无需在TheHeader或 前添加像“the”这样的前缀TheFooter。

路线组件

要创建新页面，必须在src/routes目录中添加一个新的 .svelte 文件。此外，块<script>和<style> 页面组件都可以使用<svelte:head>块。块包含 HEAD 信息，例如标题或元描述。它通常位于块之后<script>、<style>模板部分之前。

<svelte:head>
  <title>My first Sapper app</title>
</svelte:head>

<h1>Hello!</h1>
<p>This is my first Sapper app</p>
Enter fullscreen mode Exit fullscreen mode

辅助功能

Svelte 的一个很棒的功能是它会检查模板的 a11y。👏👏👏
如果<img>标签缺少属性alt，它会打印警告。但应用程序仍然可以编译。

E2E 测试

Sapper 的演示应用程序包含一个 Cypress E2E 测试。要运行测试，请执行

npm run test
Enter fullscreen mode Exit fullscreen mode

您可能会收到一条错误消息，提示您的计算机不支持“cypress”。这意味着您仍然需要安装它。为了尽量缩短安装时间，我们特意将 cypress 设置为开发依赖项。此问题已在GitHub 问题中讨论过，并通过此提交解决了此问题，该提交将信息添加到README.md中。您也可以使用以下命令自行将其添加为开发依赖项：

npm install cypress --save-dev
Enter fullscreen mode Exit fullscreen mode

或者全局安装以便在任何地方使用它

npm install -g cypress
Enter fullscreen mode Exit fullscreen mode

静态构建

🎉 这就是创建第一个 Sapper 应用程序所需了解的全部内容。🎉

让我们开始构建它。要执行演示应用程序的静态构建，请运行：

npm run export
Enter fullscreen mode Exit fullscreen mode

并在目录中找到构建的文件./__sapper__/export。

Netlify 部署

要在Netlify上部署静态页面，请将项目初始化为 git 仓库并将其上传到 GitHub。在 Netlify 上导入该项目。转到项目设置。编辑“构建和部署”的设置。构建命令是npm run export。发布目录是__sapper__/export。触发部署，应用程序将被构建和部署。

文章来源：https://dev.to/vannsl/statically- generated-website-with-svelte-and-sapper-5bi7
Devto 翻译
PREV
如何使用 Gatsby 和 Netlify 建立博客
NEXT
使用 React Hooks 和 context 进行全局状态管理