给新手开发者的 Svelte 教程

Posted 2021-09-28 前端子鱼

从未摸过 Node.js 或者命令行的初学者也没问题。

注意：原文发表于2019-04-16，随着框架不断演进，部分内容可能已不适用。

这篇简短的指南旨在帮助你去安装 Svelte 和跑起来（已经看过教程的童鞋，想开始创建 Svelte 应用，但又碍于没有多少 javascript 构建工具使用经验的人）。

如果有哪些不合理或者我们没有覆盖到的地方，请随时提出问题或者建议你直接编辑这个页面，可以和我们一起帮助更多的人。

如果你遵循本指南的任何步骤但是卡住了，聊天室是最佳的求助地点。

先说说重点

你将使用命令行，也就是终端。

在 Windows 上，可以通过“开始”菜单运行“命令提示符”来打开它。

在 Mac 上，同时按下 Cmd 和空格键打开 Spotlight，然后输入 Terminal.app。

而在大多数 Linux 系统上，使用 Ctrl+Alt+T 快捷键可以打开命令行。

与日常使用的 GUI（图形用户界面）相比，命令行是一种与你计算机（或者另一台计算机，不过这是另一个话题哈）进行交互的方式。

它具有比 GUI 更强大的功能和控制力。

进入命令行后，你可以使用 ls（在 Windows 上是 dir）命令来浏览文件系统，ls 用于列出当前目录的内容。

而 cd 命令可以改变当前目录，假设当前目录下有一个“Development”的文件夹，则可以输入：

cd Development

进入这个文件夹。

进入后，通过 mkdir 命令可以创建一个新的目录：

mkdir svelte-projects
cd svelte-projects

限于篇幅，我们不会完整地介绍全部命令行，这里有一些很有用的命令：

• cd .. —— 退回到当前目录的上一级
• cat my-file.txt —— 在 Mac/Linux 上（Windows 上可直接输入 my-file.txt），展示 my-file.txt 的内容。
• open .（Windows 上使用 start .）—— 在 Finder 或者文件夹浏览器打开当前目录。

安装 Node.js

Node 是一种在命令行上运行 JavaScript 的程序，许多 Tool 都使用它，包括 Svelte。

如果你还没有安装它，最简单的方法就是直接从官网去下载最新版本。

安装后，你就可以这3个新命令：

• node my-file.js —— 运行 my-file.js 这个 JavaScript
• npm [子命令] —— npm 是一种安装 Node 程序依赖包的方法，例如 svelte 这个程序包。
• npx [子命令] —— 这是一种便捷的方式，允许你不用永久安装就能运行 npm 上的程序包。

安装文本编辑器

要开始编写代码，你需要一个好的编辑器。

最受欢迎的就是 Visual Studio Code 了，当然这是有原因的：它经过精心设计且功能齐全，还要大量的扩展插件（包括 Svelte 的扩展，当你编写组件时，它能提供语法提示和诊断信息。）

创建一个项目

我们就按照《Svelte 极简入门》里第二部分的说明进行操作。

首先，我们会使用 npx 运行 degit，这是一个从 Github 或者其他网站的代码库中 clone 项目模板的程序。

你也可以不用项目模板，但这可以减少很多设置工作。

你需要安装了 Git 才能使用 degit。（你终究是要学习 Git 的，大多数程序员都用它来管理他们的项目。）

在命令行上切换到要创建新项目的目录，然后输入以下命令（你可以复制粘贴下面全部内容，不过建议你一行一行地敲然后运行，这样可以形成肌肉记忆）。

npx degit sveltejs/template my-svelte-project
cd my-svelte-project
npm install

这将会创建一个新目录 my-svelte-project，并从 sveltejs/template 代码库中新增很多文件到这里，然后会使用 npm 安装很多程序包。

用你的文本编辑器打开这个目录看看。

程序的源码就位于 src 目录下，你应用可以读取的文件都在 public 目录下。

在 package.json 文件中，有一个地方叫“scripts”。这些脚本定义了使用程序的快捷方式 —— dev，build 和 start。

要在开发模式下启动应用，只需要输入以下命令：

npm run dev

运行 dev 脚本将会启动一个名为 Rollup 的程序。

Rollup 要做的事情，就是拿到你的应用的源文件（目前位置有 src/main.js 和 src/App.svelte）。

然后将它们发给其他程序（在这个例子中包括有 Svelte），并将它们转换为可以在浏览器中打开时实际运行的代码。

至此，你可以打开浏览器并导航到 http://localhost:5000。这是运行在端口 5000 上的本地 Web 服务器（即 localhost）程序。

试着修改一下 src/App.svelte 然后保存，应用会自动重新加载你最终的修改。

构建你的应用

来到最后一步，我们以“开发模式”运行该程序。

在 dev 开发模式下，Svelte 会添加一些有助于调试的额外代码，并且 Rollup 跳过使用 Terser 压缩 JavaScript 的这一步。

将你的应用公诸于世之时，你应该以“生产模式”来构建它，它可以使最终用户程序尽可能小巧高效。

为此，请使用 build 命令：

npm run build

你的 public 目录下现在多了一个已经压缩过的 bundle.js 文件，应用的 JavaScript 就包含在其中。

你可以这样运行它：

npm run start

这将在 http://localhost:5000 上运行它。

下一步

要与全世界共享你的应用，你还需要部署它。

有很多方法可以做这件事情 —— 在项目中的 README.md 文件里列举了一些方法。

---

< The End >

- 窗明几净，静候时日变迁 -