Svelte 入门

Svelte 提供了与本模块中介绍的其他一些框架不同的构建 Web 应用程序的方法。虽然 React 和 Vue 等框架在应用程序运行时在用户的浏览器中完成了大部分工作，但 Svelte 将这些工作转移到构建应用程序时发生的编译步骤中，从而生成高度优化的原生 JavaScript。

这种方法的结果不仅是应用程序包更小，性能更好，而且对于那些对现代工具生态系统经验有限的人来说，开发体验也更加容易上手。

Svelte 紧密地遵循 HTML、CSS 和 JS 的经典 Web 开发模式，只是在 HTML 和 JavaScript 中添加了一些扩展。与其他一些框架选项相比，它可以争辩说学习的概念和工具更少。

它目前的主要缺点是它是一个年轻的框架——因此它的生态系统在工具、支持、插件、清晰的用法模式等方面比更成熟的框架更有限，而且工作机会也更少。但它的优势应该足以让你有兴趣探索它。

我们建议您在返回本教程系列学习如何构建更深入的内容之前，先完成 Svelte 教程，以快速了解基本概念。

Svelte 可用于开发界面的少量部分或整个应用程序。您可以从头开始让 Svelte 驱动您的 UI，或者可以将其逐步集成到现有应用程序中。

然而，Svelte 特别适合解决以下情况

• 旨在用于低功耗设备的 Web 应用程序：使用 Svelte 构建的应用程序具有更小的包大小，这对于网络连接缓慢和处理能力有限的设备来说非常理想。代码越少，下载、解析、执行和保留在内存中的 KB 就越少。
• 高度交互式页面或复杂的可视化：如果您正在构建需要显示大量 DOM 元素的数据可视化，那么来自没有运行时开销的框架的性能提升将确保用户交互快速且响应灵敏。
• 让具有基本 Web 开发知识的人入门：Svelte 的学习曲线很浅。具有基本 HTML、CSS 和 JavaScript 知识的 Web 开发人员可以在短时间内轻松掌握 Svelte 的细节，并开始构建 Web 应用程序。

Svelte 团队推出了 SvelteKit，这是一个使用 Svelte 构建 Web 应用程序的框架。它包含现代 Web 框架中发现的功能，例如基于文件系统的路由、服务器端渲染 (SSR)、页面特定渲染模式、离线支持等等。有关 SvelteKit 的更多信息，请参阅 官方教程 和 文档。

Svelte 还可通过 Svelte Native 用于移动开发。

作为编译器，Svelte 可以扩展 HTML、CSS 和 JavaScript，生成最佳的 JavaScript 代码，而没有任何运行时开销。为了实现这一点，Svelte 以以下方式扩展了原生 Web 技术

• 它通过允许在标记中使用 JavaScript 表达式并提供指令来使用条件和循环来扩展 HTML，其方式类似于 handlebars。
• 它通过添加范围机制来扩展 CSS，允许每个组件定义自己的样式，而不会与其他组件的样式冲突。
• 它通过重新解释语言的特定指令来扩展 JavaScript，以实现真正的反应性并简化组件状态管理。

编译器只在非常特定的情况下以及仅在 Svelte 组件的上下文中进行干预。对 JavaScript 语言的扩展是最低限度的，并且经过仔细挑选，以避免破坏 JavaScript 语法或疏远开发人员。实际上，您将主要使用原生 JavaScript。

由于 Svelte 是一个编译器，因此您不能只是在页面中添加一个 <script src="svelte.js"> 标签，然后将其导入您的应用程序。您必须设置您的开发环境才能让编译器完成其工作。

要使用 Svelte，您需要安装 Node.js。建议您使用长期支持 (LTS) 版本。Node 包含 npm（节点包管理器）和 npx（节点包运行器）。请注意，您也可以使用 Yarn 包管理器代替 npm，但本教程系列将假设您使用的是 npm。有关 npm 和 yarn 的更多信息，请参阅 包管理基础。

如果您使用的是 Windows，则需要安装一些软件才能为您提供与 Unix/macOS 终端等效的功能，以便使用本教程中提到的终端命令。Gitbash（作为 git for Windows 工具集 的一部分提供）或 Windows 子系统 for Linux (WSL) 都很适合。有关这些内容以及一般终端命令的更多信息，请参阅 命令行速成课程。

另请参阅以下内容以获取更多信息

• "关于 npm" 在 npm 文档中
• "介绍 npx" 在 npm 博客上

创建入门应用程序模板的最简单方法是只需下载入门模板应用程序。您可以通过访问 GitHub 上的 sveltejs/template 来做到这一点，或者您可以避免下载和解压缩它，只需使用 degit 即可。

要创建您的入门应用程序模板，请运行以下终端命令

npx degit sveltejs/template moz-todo-svelte
cd moz-todo-svelte
npm install
npm run dev

运行 npm run dev 后，Svelte 将编译和构建您的应用程序。它将在 localhost:8080 上启动本地服务器。Svelte 将监视文件更新，并在对源文件进行更改时自动重新编译并刷新应用程序。您的浏览器将显示类似以下内容

入门模板附带以下结构

moz-todo-svelte
├── README.md
├── package.json
├── package-lock.json
├── rollup.config.js
├── .gitignore
├── node_modules
├── public
│   ├── favicon.png
│   ├── index.html
│   ├── global.css
│   └── build
│       ├── bundle.css
│       ├── bundle.js
│       └── bundle.js.map
├── scripts
│   └── setupTypeScript.js
└── src
    ├── App.svelte
    └── main.js

内容如下

• package.json 和 package-lock.json：包含有关 Node.js/npm 用于保持项目井井有条的信息。您不需要了解此文件即可完成本教程，但是，如果您想了解更多信息，您可以阅读有关 npmjs.com 上的 package.json 处理 的内容；我们还在我们的 包管理基础教程 中介绍了它。
• node_modules：这是节点保存项目依赖项的地方。这些依赖项不会发送到生产环境，它们仅用于开发目的。
• .gitignore：告诉 git 从项目中忽略哪些文件或文件夹——如果您决定将您的应用程序包含在 git 存储库中，这很有用。
• rollup.config.js：Svelte 使用 rollup.js 作为模块捆绑器。此配置文件告诉 rollup 如何编译和构建您的应用程序。如果您更喜欢 webpack，您可以使用 npx degit sveltejs/template-webpack svelte-app 创建您的入门项目。
• scripts：包含根据需要设置的脚本。目前应该只包含 setupTypeScript.js。
  • setupTypeScript.js：此脚本在 Svelte 中设置 TypeScript 支持。我们将在最后一篇文章中详细介绍它。
• src：此目录是您的应用程序源代码所在的地方——您将在其中创建应用程序的代码。
  • App.svelte：这是您应用程序的顶级组件。到目前为止，它只呈现“Hello World！”消息。
  • main.js：我们应用程序的入口点。它只是实例化 App 组件并将其绑定到 HTML 页面的主体。
• public：此目录包含将在生产环境中发布的所有文件。
  • favicon.png：这是您应用程序的 favicon。目前，它是 Svelte 徽标。
  • index.html：这是您应用程序的主页。最初它只是一个空的 HTML 页面，它加载由 Svelte 生成的 CSS 文件和 js 包。
  • global.css：此文件包含无范围样式。它是一个常规的 CSS 文件，将应用于整个应用程序。
  • build：此文件夹包含生成的 CSS 和 JavaScript 源代码。
    • bundle.css：Svelte 从为每个组件定义的样式生成的 CSS 文件。
    • bundle.js：从所有 JavaScript 源代码编译的 JavaScript 文件。

组件是 Svelte 应用程序的构建块。它们使用 HTML 的超集写入 .svelte 文件中。

所有三个部分——<script>、<style> 和标记——都是可选的，并且可以按任何您喜欢的顺序出现。

<script>
  // logic goes here
</script>

<style>
  /* styles go here */
</style>

<!-- markup (zero or more HTML elements) goes here -->

考虑到这一点，让我们看一下入门模板附带的 src/App.svelte 文件。您应该看到类似以下内容

<script>
  export let name;
</script>

<main>
  <h1>Hello {name}!</h1>
  <p>
    Visit the <a href="https://learn.svelte.dev/">Svelte tutorial</a> to learn
    how to build Svelte apps.
  </p>
</main>

<style>
  main {
    text-align: center;
    padding: 1em;
    max-width: 240px;
    margin: 0 auto;
  }

  h1 {
    color: #ff3e00;
    text-transform: uppercase;
    font-size: 4em;
    font-weight: 100;
  }

  @media (min-width: 640px) {
    main {
      max-width: none;
    }
  }
</style>

<script> 块包含在创建组件实例时运行的 JavaScript。在顶层声明（或导入）的变量从组件的标记中“可见”。顶层变量是 Svelte 处理组件状态的方式，它们默认情况下是反应式的。我们将在后面详细解释这意味着什么。

<script>
  export let name;
</script>

Svelte 使用 export 关键字来标记变量声明为属性（或 prop），这意味着它可以被组件的使用者（例如其他组件）访问。这是一个 Svelte 扩展 JavaScript 语法使其更实用，同时保持其熟悉的示例。

在标记部分，你可以插入任何你喜欢的 HTML 代码，此外你还可以插入单花括号 ({}) 中的有效 JavaScript 表达式。在这种情况下，我们在 Hello 文本之后嵌入 name 属性的值。

<main>
  <h1>Hello {name}!</h1>
  <p>
    Visit the <a href="https://learn.svelte.dev/">Svelte tutorial</a> to learn
    how to build Svelte apps.
  </p>
</main>

Svelte 还支持 {#if}、{#each} 和 {#await} 这样的标签——这些示例允许你分别有条件地渲染标记的一部分、迭代元素列表和处理异步值。

如果你有使用 CSS 的经验，下面的代码片段应该是有意义的

<style>
  main {
    text-align: center;
    padding: 1em;
    max-width: 240px;
    margin: 0 auto;
  }

  h1 {
    color: #ff3e00;
    text-transform: uppercase;
    font-size: 4em;
    font-weight: 100;
  }

  @media (min-width: 640px) {
    main {
      max-width: none;
    }
  }
</style>

我们将样式应用于我们的 <h1> 元素。对于其他包含 <h1> 元素的组件会发生什么？

在 Svelte 中，组件 <style> 块中的 CSS 仅作用于该组件。这是通过向选定元素添加一个基于组件样式哈希的类来实现的。

你可以在新的浏览器标签中打开 localhost:8080，右键/Ctrl-单击HELLO WORLD! 标签，然后选择检查来查看实际效果。

在编译应用程序时，Svelte 将我们的 h1 样式定义更改为 h1.svelte-1tky8bj，然后将组件中的每个 <h1> 元素修改为 <h1 class="svelte-1tky8bj">，以便它按需获取样式。

现在我们已经对它如何组合在一起有了一个大致的了解，我们可以开始做一些更改。此时，你可以尝试更新你的 App.svelte 组件——例如，更改 App.svelte 中的 <h1> 元素，使其如下所示

<h1>Hello {name} from MDN!</h1>

只需保存更改，运行在 localhost:8080 上的应用程序就会自动更新。

在 UI 框架的上下文中，响应性意味着当任何组件的状态发生变化时，框架可以自动更新 DOM。

在 Svelte 中，响应性是通过将新值赋给组件中的任何顶级变量来触发的。例如，我们可以在 App 组件中包含一个 toggleName() 函数和一个按钮来运行它。

尝试像这样更新你的 <script> 和标记部分

<script>
  export let name;

  function toggleName() {
    if (name === "world") {
      name = "Svelte";
    } else {
      name = "world";
    }
  }
</script>

<main>
  <h1>Hello {name}!</h1>
  <button on:click="{toggleName}">Toggle name</button>
  <p>
    Visit the <a href="https://learn.svelte.dev/">Svelte tutorial</a> to learn
    how to build Svelte apps.
  </p>
</main>

每当单击按钮时，Svelte 都会执行 toggleName() 函数，该函数反过来会更新 name 变量的值。

如你所见，<h1> 标签会自动更新。在幕后，Svelte 创建了 JavaScript 代码，以便在 name 变量的值发生变化时更新 DOM，而无需使用任何虚拟 DOM 或其他复杂的协调机制。

注意 on:click 中使用的是 :。这是 Svelte 的语法，用于监听 DOM 事件。

让我们打开 src/main.js，这是导入和使用 App 组件的地方。该文件是应用程序的入口点，最初看起来像这样

import App from "./App.svelte";

const app = new App({
  target: document.body,
  props: {
    name: "world",
  },
});

export default app;

main.js 从导入要使用的 Svelte 组件开始。然后它使用 new App 实例化，传递一个具有以下属性的选项对象

• target：我们要渲染组件的 DOM 元素，在本例中为 <body> 元素。
• props：要分配给 App 组件中每个属性的值。

Svelte 如何管理这些文件之间的良好协作？

Svelte 编译器处理每个组件的 <style> 部分，并将它们编译到 public/build/bundle.css 文件中。

它还编译每个组件的标记和 <script> 部分，并将结果存储在 public/build/bundle.js 中。它还添加了 src/main.js 中的代码，以引用每个组件的功能。

最后，public/index.html 文件包含生成的 bundle.css 和 bundle.js 文件

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />

    <title>Svelte app</title>

    <link rel="icon" type="image/png" href="/favicon.png" />
    <link rel="stylesheet" href="/global.css" />
    <link rel="stylesheet" href="/build/bundle.css" />

    <script defer src="/build/bundle.js"></script>
  </head>

  <body></body>
</html>

bundle.js 的最小化版本重约 3KB，其中包括“Svelte 运行时”（只有 300 行 JavaScript 代码）和 App.svelte 编译后的组件。如你所见，bundle.js 是 index.html 引用的唯一 JavaScript 文件。没有其他库被加载到网页中。

与其他框架的编译后的包相比，这是一个小得多的占用空间。请注意，对于代码包而言，不仅要考虑下载的文件大小，还要考虑可执行代码需要解析、执行和保留在内存中。因此，这确实会产生影响，尤其是在低功耗设备或 CPU 密集型应用程序中。

在本教程系列中，你将构建一个完整的 Web 应用程序。我们将学习有关 Svelte 的所有基础知识，以及一些高级主题。

你只需阅读内容即可对 Svelte 的功能有一个很好的了解，但如果你边编码边学习应用程序，你会从本教程中获得最大的收益。为了方便你跟踪每篇文章，我们提供了一个 GitHub 存储库，其中包含一个文件夹，其中包含应用程序在每个教程开始时的源代码。

Svelte 还提供了一个在线 REPL，它是一个在线实时编码 Svelte 应用程序的游乐场，无需在你的机器上安装任何内容。我们为每篇文章提供了一个 REPL，这样你就可以立即开始编码。让我们再谈谈如何使用这些工具。

最流行的版本控制系统是 Git，以及 GitHub，一个提供存储库托管和几个用于与存储库交互的工具的网站。

我们将使用 GitHub，以便你能够轻松地下载每篇文章的源代码。你还将能够获取完成文章后的代码，以防你迷路了。

在 安装 git 后，要克隆存储库，你应该执行

git clone https://github.com/opensas/mdn-svelte-tutorial.git

然后，在每篇文章的开头，你只需 cd 到相应的文件夹，然后以开发模式启动应用程序，以查看它的当前状态应该是什么，例如

cd 02-starting-our-todo-app
npm install
npm run dev

如果你想了解更多关于 git 和 GitHub 的信息，我们已经整理了一份包含指向有用指南的链接列表——请参阅 Git 和 GitHub。

REPL (读取-求值-打印循环) 是一个交互式环境，允许你输入命令并立即查看结果——许多编程语言都提供 REPL。

Svelte 的 REPL 不止于此。它是一个在线工具，允许你创建完整的应用程序，在线保存它们，并与他人共享。

它是从任何机器开始使用 Svelte 的最简单方法，无需安装任何内容。它也被 Svelte 社区广泛使用。如果你想分享一个想法、寻求帮助或报告问题，创建展示问题的 REPL 实例总是非常有用的。

让我们快速了解一下 Svelte REPL 以及你如何使用它。它看起来像这样

要启动 REPL，请打开你的浏览器并导航到 https://svelte.net.cn/repl。

• 在屏幕的左侧，你会看到你的组件代码，在右侧，你会看到你的应用程序正在运行的输出。
• 代码上方的栏允许你创建 .svelte 和 .js 文件并重新排列它们。要在文件夹中创建文件，只需指定完整路径名，例如：components/MyComponent.svelte。该文件夹将自动创建。
• 在该栏的上方，是 REPL 的标题。单击它以编辑它。
• 在右侧，你有三个选项卡
  • 结果选项卡显示你的应用程序输出，并在底部提供一个控制台。
  • JS 输出选项卡允许你检查 Svelte 生成的 JavaScript 代码，并设置编译器选项。
  • CSS 输出选项卡显示 Svelte 生成的 CSS。
• 在选项卡上方，你会发现一个工具栏，允许你进入全屏模式和下载你的应用程序。如果你使用 GitHub 帐户登录，你还可以 fork 和保存应用程序。你还可以通过单击你的 GitHub 用户名资料并选择你保存的应用程序来查看所有已保存的 REPL。

每当你更改 REPL 上的任何文件时，Svelte 都会重新编译应用程序并更新结果选项卡。要共享你的应用程序，请共享 URL。例如，以下是运行完整应用程序的 REPL 的链接：https://svelte.net.cn/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2。

我们将在每篇文章的开头和结尾提供一个 REPL，以便你能够立即开始与我们一起编码。

使用以下命令克隆 GitHub 仓库（如果你还没有这样做）：

git clone https://github.com/opensas/mdn-svelte-tutorial.git

然后，要进入当前应用程序状态，请运行

cd mdn-svelte-tutorial/01-getting-started

或者直接下载文件夹的内容

npx degit opensas/mdn-svelte-tutorial/01-getting-started

请记住运行 npm install && npm run dev 以以开发模式启动你的应用程序。

要使用 REPL 与我们一起编码，请从以下位置开始

https://svelte.net.cn/repl/fc68b4f059d34b9c84fa042d1cce586c?version=3.23.2

这使我们结束了对 Svelte 的初步了解，包括如何在本地安装它、创建启动应用程序以及基础知识的工作原理。在下一篇文章中，我们将开始构建第一个正式应用程序，一个待办事项列表。但是，在我们开始之前，让我们回顾一下我们学到的一些内容。

在 Svelte 中

• 我们在单个 .svelte 文件中定义每个组件的脚本、样式和标记。
• 组件属性使用 export 关键字声明。
• Svelte 组件只需导入相应的 .svelte 文件即可使用。
• 组件样式是作用域的，防止它们相互冲突。
• 在标记部分，你可以通过将 JavaScript 表达式放在花括号之间来包含它。
• 组件的顶级变量构成它的状态。
• 只需将新值赋给顶级变量，就会触发响应性。

• 上一篇
• 概述：理解客户端 JavaScript 框架
• 下一篇