从未摸过 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
这个 JavaScriptnpm [子命令]
—— 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 >
- 窗明几净,静候时日变迁 -