返回

一文读懂让你无需多费心力的网站框架——Sapper

前端

【译】下一个你值得认真尝试的框架 —— Sapper

在写关于JavaScript Report的文章中，我尽量不要去做那一个趋之若鹜的家伙。但是每隔一段时间就会有一些事情让我兴奋。Sapper是其中之一，它是一个Svelte库的上层框架，如果你喜欢快速的网站，你会喜欢 Sapper。

首先说一下关于Svelte，它的工作方式与您通常看到的大多数其他 JavaScript 框架完全不同。它是一种构建时编译器，而不是运行时编译器，这意味着它是将应用程序编译为纯 JavaScript，无需对其进行解释。这使其成为构建快速且易于使用的 Web 应用程序的理想选择。

Sapper 建立在 Svelte 的强大功能之上，使其成为一个完整的框架，用于构建和部署快速、安全的单页应用程序（SPA）。它还支持服务端渲染（SSR），这可以进一步提高您网站的性能。

以下是一些使用 Sapper 的优点：

  • 快速 ：Sapper 应用程序非常快速，因为它们使用纯 JavaScript 构建。
  • 简单 ：Sapper 非常易于学习和使用，即使您是 JavaScript 新手。
  • 强大 ：Sapper 提供各种功能，包括路由、状态管理和国际化。
  • 安全 ：Sapper 应用程序是安全的，因为它们使用 Content Security Policy (CSP) 来保护它们免受攻击。

以下是一些使用 Sapper 的缺点：

  • 新框架 ：Sapper 是一个相对较新的框架，因此可能没有其他框架那么多的资源和支持。
  • 小社区 ：Sapper 社区较小，因此可能很难找到有关该框架的帮助。

总体而言，Sapper 是一个非常棒的框架，可以用于构建快速、简单、强大且安全的单页应用程序。如果您正在寻找一个新的框架来尝试，我强烈建议您看看 Sapper。

开始使用 Sapper

要开始使用 Sapper，您需要安装 Node.js 和 npm。您还可以使用 Sapper CLI，它是一个工具，可以帮助您创建和管理 Sapper 应用程序。

一旦安装了 Sapper CLI，您就可以使用以下命令创建一个新的 Sapper 应用程序：

npx create-sapper my-app

这将在您的计算机上创建一个名为“my-app”的新文件夹。此文件夹将包含您的 Sapper 应用程序的所有文件。

要启动您的 Sapper 应用程序，请使用以下命令：

cd my-app
npm run dev

这将在您的计算机上启动一个开发服务器。您可以通过访问 http://localhost:3000 来查看您的 Sapper 应用程序。

构建您的第一个 Sapper 应用程序

要构建您的第一个 Sapper 应用程序，请在您的应用程序的根目录中创建一个名为“src”的文件夹。此文件夹将包含您的应用程序的所有源文件。

在“src”文件夹中，创建一个名为“App.svelte”的文件。此文件将包含您的应用程序的根组件。

<script>
  import { onMount } from 'svelte';

  let name = 'World';

  onMount(() => {
    console.log(`Hello, ${name}!`);
  });
</script>

<h1>Hello, {name}!</h1>

此代码将创建一个简单的 Sapper 应用程序，它将在控制台中打印“Hello, World!”。

要运行您的 Sapper 应用程序，请使用以下命令：

npm run dev

这将在您的计算机上启动一个开发服务器。您可以通过访问 http://localhost:3000 来查看您的 Sapper 应用程序。

更多资源

有关 Sapper 的更多信息，请参阅以下资源：