给新手开发者的 Svelte 教程

从未摸过 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”。这些脚本定义了使用程序的快捷方式 —— devbuildstart

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

npm run dev

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

Rollup 要做的事情,就是拿到你的应用的源文件(目前位置有 src/main.jssrc/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 >

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

你可能感兴趣的:(给新手开发者的 Svelte 教程)