Svelte 的介绍和安装

Svelte 是创建 Web 应用程序的新方法，可以使用它来创建从代码的一小部分到完整页面的 Web 应用程序。Svelte 不是一个框架，它是一个编译器，与其他 JavaScript 库（如 Angular JS、Vue.js 和 React JS）相比，它速度更快。Svelte 的主要目的是创建响应式的 Web 应用程序，并提供功能，即如果数据发生任何变化，页面将立即反映出来，而不需要太多的时间。

Svelte 的介绍

如我们在开头段落中所见，Svelte 是创建 Web 应用程序的新方法，可以使用它来创建从代码的一小部分到完整页面的 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 − 在这一步中，用户必须安装所有依赖项，并且要注意的是在current project的project_name文件夹中安装所有依赖项。

npm install

在终端中运行上述命令。

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

Svelte的用途

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

Svelte最适合处理以下情况，尽管如下所示−

Svelte构建的应用程序具有更小的捆绑包大小，非常适合具有慢速网络连接和较低处理能力的设备。为低功耗硬件制作的Web应用程序。较少的代码意味着需要下载、解析和执行的内存密集KB更少。
高度交互的网站或复杂的可视化：如果您创建的数据可视化需要显示大量DOM元素，则来自具有较少运行时开销的框架的性能增益可以确保用户交互迅速且响应灵敏。
没有先前网络开发知识的用户可以通过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
脚本，其进一步包含设置TypeScript.js
src包含App.svelte和main.js

结论

在这个教程中，我们学习了关于Svelte的介绍和安装。Svelte是一种创建网页应用程序的新方法，它可以从代码的一小部分到完整的页面应用程序使用。Svelte不是一个框架，它是一个编译器，相比于其他JavaScript库（如AngularJS、Vue.js和React JS），它速度更快。在执行时，Svelte将生产代码编译成纯的JavaScript束。