Svelte 入门

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 如何工作？

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

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

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

Svelte 初步

由于 Svelte 是一个编译器，你不能只是在页面中添加一个 <script src="svelte.js"> 标签并将其导入到你的应用程序中。你需要设置你的开发环境，以便编译器完成它的工作。

依赖项

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

如果你使用的是 Windows，你需要安装一些软件，以使你的终端与 Unix/macOS 终端具有同等功能，以便使用本教程中提到的终端命令。Git Bash（作为 Windows 版 Git 工具集 的一部分）或 适用于 Linux 的 Windows 子系统 (WSL) 都适用。有关这些以及一般终端命令的更多信息，请参阅 命令行速成课程。

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

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

创建你的第一个 Svelte 应用

创建入门应用模板最简单的方法是直接下载入门模板应用程序。你可以通过访问 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：这是 Node 保存项目依赖项的地方。这些依赖项不会发送到生产环境，它们仅用于开发目的。

• .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 页面的 body 中。

• 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 组件

组件是 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 (width >= 640px) {
    main {
      max-width: none;
    }
  }
</style>

<script> 部分

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

<script>
  export let name;
</script>

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

标记部分

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

<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} 等标签——这些示例允许你分别有条件地渲染部分标记、遍历元素列表以及处理异步值。

<style> 部分

如果你有使用 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 (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 运行的应用程序将自动更新。

Svelte 响应性的初探

在 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 事件的语法。

检查 main.js：我们应用程序的入口点

让我们打开 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

最流行的版本控制系统是 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。

使用 Svelte REPL

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 帐户登录，你还可以克隆并保存应用程序。你还可以通过点击你的 GitHub 用户名个人资料并选择“你保存的应用程序”来查看所有已保存的 REPL。

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

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

目前的全部代码

Git

使用以下命令克隆 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

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

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

总结

至此，我们对 Svelte 的初步了解，包括如何本地安装、创建入门应用程序以及基本工作原理。在下一篇文章中，我们将开始构建我们的第一个实际应用程序——一个待办事项列表。但在那之前，让我们回顾一下我们所学到的一些内容。

在 Svelte 中

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

• 概述：JavaScript 框架和库
• 下一页