Svelte 简介及安装

---

Svelte 是一种创建 Web 应用程序的新方法，它可以用于从代码的一小部分到完整的网页应用程序。Svelte 不是框架，而是一个编译器，它比其他 JavaScript 库（如 AngularJS、Vue.js 和 ReactJS）快得多。Svelte 的主要目的是创建响应式 Web 应用程序，并提供这样的功能：如果数据发生任何更改，它将迅速反映在页面上，并且不会花费太多时间。

Svelte 简介

正如我们在开篇段落中所看到的，Svelte 是一种创建 Web 应用程序的新方法，它可以用于从代码的一小部分到完整的网页应用程序，这使得它易于用于快速应用开发 (RAD)。RAD 意味着快速生成小型代码应用程序用于软件并在 Web 优化中使用。Svelte 与其他技术的主要区别在于它不使用虚拟 DOM，并且它是免费使用的。

Svelte 在执行时将用于生产的代码编译成普通的 JavaScript 包。与其他库不同，用户无需通过互联网部署 Svelte 来通过互联网部署他们的应用程序。所有这些都使得在使用 Svelte 时可以快速执行。

前提条件

在用户在本地机器上使用 Svelte 之前，系统或计算机中需要存在某些技术。这些前提条件是：

• 文本编辑器，例如 Atom、Sublime Text 3 等。

• 在本地电脑上安装 Node.js，因为 Node.js 是运行 Svelte 的基石。

Svelte 的安装

获得前提条件后，我们现在准备安装 Svelte。我们将逐步进行，以便更好地理解：

步骤 1 - 在命令提示符或终端中键入以下命令：

npm install -g degit 

Degit 是一个允许用户简单地从 GitHub 仓库克隆先前提交的包。

步骤 2 - 下一步是在本地电脑上创建一个新目录，然后运行以下命令：

degit sveltejs/template project_name 

通过此命令，degit 将转到 sveltejs（仓库）并找到模板，以便将其下载到用户本地电脑上的名为 project_name 的项目中。

步骤 3 - 现在我们已经完成了基础步骤，下一步是在我们的文本编辑器中，在 project_name 文件夹下，我们有 src 文件夹，其中包含 main.js 文件，此文件主要用于执行用户的 Svelte 应用程序。这里还有另外两个文件，分别是 App.svelte 和 package.json。package.json 文件包含需要安装的所有依赖项，另一个文件 App.svelte 是应用程序的根组件。

步骤 4 - 在此步骤中，用户必须安装所有依赖项，需要注意的是，要在当前项目（即 project_name 文件夹）中安装所有依赖项。

npm install 

在终端中运行上述命令。

通过所有这些命令，用户就可以启动基于 Svelte 的应用程序。

Svelte 的用途

Svelte 可用于构建独立程序和特定的界面组件。使用 Svelte，您可以从头开始创建 UI，也可以将其逐步集成到现有应用程序中。

尽管如此，Svelte 最适合处理以下情况：

• 使用 Svelte 构建的应用程序具有更小的包大小，因此非常适合网络连接缓慢和处理能力较低的设备。适用于低功耗硬件的 Web 应用。较少的代码意味着需要下载、解析和执行的内存密集型 KB 较少。

• 高度交互式的网站或复杂的可视化：如果您正在创建需要显示大量 DOM 元素的数据可视化，则来自运行时开销较小的框架的性能提升将确保用户交互快速且响应迅速。

• 由于学习曲线较快，即使没有 Web 开发经验的用户也可以轻松上手 Svelte。拥有 HTML、CSS 和 JavaScript 基础知识的 Web 开发人员可以轻松理解 Svelte 的复杂性。

Svelte 的基本工作原理

由于 Svelte 是一个编译器，它可以扩展 HTML、CSS 和 JavaScript，并生成没有运行时成本的最佳 JavaScript 代码。为此，Svelte 以以下方式扩展了现有 Web 技术：

• 它通过允许在标记中使用 JavaScript 表达式并提供使用类似于 handlebars 的样式在条件和循环中使用指令来扩展 HTML。

• 它通过提供作用域机制来扩展 CSS，并使每个组件能够表达自己的样式，而无需担心它们与其他组件的样式冲突。

• 它通过重新解释该语言的一些指令来扩展 JavaScript，以便实现真正的响应能力并简化组件状态管理。

编译器仅在涉及 Svelte 组件且仅在非常具体的情况下才会介入。对 JavaScript 语言的扩展被控制在最小限度，并经过仔细选择，以避免破坏 JavaScript 语法或疏远开发人员。实际上，大多数时候您将使用普通的 JavaScript。

应用程序结构

首先，我们将获得 moz-todo-svelte 文件，其中将包含：

• README.md、package.json、package-lock.json、rollup、.config.js、.gitignore、node_modules、public。

• public 将进一步包含：

• favicon.png、index.html、global.css、build、bundle.css、bundle.js、bundle.js.map

• scripts，这将进一步包含 setupTypeScript.js

• src，其中将包含 App.svelte 和 main.js

结论

在本教程中，我们学习了 Svelte 的简介和安装。Svelte 是一种创建 Web 应用程序的新方法，它可以用于从代码的一小部分到完整的网页应用程序。Svelte 不是框架，而是一个编译器，它比其他 JavaScript 库（如 AngularJS、Vue.js 和 ReactJS）快得多。Svelte 在执行时将用于生产的代码编译成普通的 JavaScript 包。