从未摸过 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-projectscd 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-projectcd my-svelte-projectnpm 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 >

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