主要内容

●创建 Svelte组件

●通过store管理共享数据

●配置页面路由 

●调试、测试和部署Svelte 应用程序

●使用Sapper开发动态网站和静态网站

前    言

本书读者对象

《Svelte和Sapper实战》一书面向希望提升开发效率的Web开发人员。也许你一直在思考是不是有一种更简单的开发方式来开发Web应用程序。恭喜你，答案就在《Svelte和Sapper实战》。通过大量代码示例，你将学会如何使用Svelte和Sapper开发Web应用程序。

《Svelte和Sapper实战》面向的读者需要具备一些基本的HTML、CSS和JavaScript知识。

· 关于HTML，读者需要熟悉html、head、link、style、script、body、div、span、p、ol、ul、li、input、textarea和select等元素。

· 关于CSS，读者需要理解CSS语法规则，什么是CSS的“级联”，了解基本的CSS选择器(包括元素名、类名、id、继承关系)，了解常用的CSS属性(包括color、font-family、font-size、font-style和font-weight)以及CSS盒模型(content、padding、border和margin)。

· 关于JavaScript，读者需要知道变量、字符串、数组、对象、函数、类、promise、解构、spread操作符、export和import。

如果你发现了关于《Svelte和Sapper实战》的任何问题，可以在网络上与我们沟通。我希望当你读完《Svelte和Sapper实战》时，能够发现Svelte和Sapper的一些与众不同的地方，并在下一个项目中尝试使用它们。

《Svelte和Sapper实战》的结构：路线图

《Svelte和Sapper实战》分为四部分，包括21章。

第Ⅰ部分介绍Svelte和Sapper。

· 第1章主要阐述Svelte和Sapper的一些过人之处，在结尾部分介绍Svelte Native，并与其他主流的Web框架进行对比。此外，还介绍开发所需的工具。

· 第2章将带你使用在线工具(REPL)创建第一个Svelte应用程序。通过这种在线方式构建的应用程序可以在线保存，并与他人共享代码，还可将代码导出到本地继续进行开发。此外，还介绍在本地开发Svelte应用程序的步骤。

第Ⅱ部分将深入研究Svelte，并提供大量代码示例供参考。

· 第3章介绍如何构建Svelte组件，包括其中的逻辑、标签和样式。随后介绍如何使用响应式语句以及模块上下文来管理组件状态。最后，将展示一个自定义组件的示例。

· 第4章涵盖Svelte的块结构，包括条件逻辑、迭代、promise异步控制HTML标签等。{#if}实现了条件逻辑，{#each}实现了迭代遍历的功能，{#await}实现了promise异步功能。

· 第5章将带你探索组件之间的通信，包括props、双向绑定、slot、事件和上下文。

· 第6章阐述如何使用store共享组件之间的数据。store有四种类型：可读写、只读、派生和自定义。随后介绍如何使用JavaScript类创建store以及持久化store中的数据。

· 第7章展示在Svelte组件中操作DOM的几种方法，包括插入HTML，使用“动作”获得DOM元素，在Svelte重新渲染后使用tick函数手动修改DOM。最后，将展示一个对话框以及实现拖曳功能的示例。

· 第8章将讲解Svelte的生命周期函数，包括onMount、beforeUpdate、afterUpdate和onDestroy。最后，展示一个基于现有Svelte生命周期函数自定义新的生命周期函数的示例。

· 第9章演示为Svelte应用程序添加页面路由的三种方法：手动路由、哈希路由以及使用page.js进行路由。我们将开发一个购物应用程序来演示这三种路由。此外，还可使用Sapper实现路由，相关内容将在第16章详细介绍。

· 第10章探讨在Svelte中对于动画的有力支持，详细介绍svelte/animate、svelte/motion和svelte/transition这三个包，以及在两个列表之间移动列表元素的两种方式：一种方式使用fade过渡效果和flip动画的组合，另一种方式使用crossfade过渡效果。最后讨论如何创建自定义动画以及如何使用过渡事件。

· 第11章展示如何调试Svelte应用程序。包括@debug标签、使用console方法调试响应式语句以及配套的浏览器调试插件svelte-devtools。

· 第12章演示Svelte应用程序的多种测试方法。Jest和svelte-testing-library可用来执行单元测试。端到端的测试可使用Cypress。Svelte还为可访问性提供了一些测试手段，如果你想进行额外的可访问性测试，可采用Lighthouse、axe和WAVE。最后，可以使用Storybook展示和操作测试组件。

· 第13章将带你探索如何部署Svelte应用程序，包括手动部署一个HTTP服务器，以及如何使用Netlify、VercelNow和Docker。

· 第14章主要介绍Svelte的其他一些知识点，包括表单验证、CSS变量、使用“特殊元素”创建Svelte组件库，以及利用Svelte组件生成Web Components。

第Ⅲ部分将深入研究Sapper。Sapper是一个基于Svelte的Web应用程序开发框架。

· 第15章将使用Sapper重构第9章中的购物应用程序，这将是你的第一个Sapper应用程序。

· 第16章将全面介绍Sapper。首先介绍Sapper应用程序的结构，之后是Sapper的一些功能，包括页面路由、页面布局、预加载、预请求以及代码分割。

· 第17章将探索Sapper的服务器路由，通过服务器路由，我们的项目就不仅是Web应用程序的客户端了，还具备了提供API服务的能力。你将学会创建、查询、更新、删除(CRUD)等一系列服务是如何实现的。

· 第18章展示如何将Sapper应用程序部署成一个静态站点。对于那些采用HTML作为页面展示载体的应用程序来说，这非常有用。最后，将带你一起实现一个类似的应用程序，其中包括两个页面，一个是石头剪刀布的游戏，另一个是我家的狗。

· 第19章描述如何使用service worker实现Sapper的离线功能。将介绍以下内容：多种缓存策略；Sapper内置service worker的一些细节，包括install、activate和fetch等service worker事件；如何启用HTTPS。最后，带你一起体验Sapper的离线功能是如何发挥作用的。

第Ⅳ部分将不局限于Svelte和Sapper。

· 第20章将带你探索对于高级语法的预处理技术，包括Sass、TypeScript和Markdown，并提供这些预处理技术对应的示例。

· 第21章将介绍Svelte Native以及如何使用Svelte和NativeScript来开发Android端和iOS端的移动应用程序。我们将利用REPL创建两个在线的Svelte Native应用程序，使用REPL的好处是并不需要在计算机中安装任何软件。同时将提供一个示例来详细解释显示、表单、动作、对话框、布局和导航等组件的实现细节，以及如何为Svelte Native组件添加样式。最后，介绍NativeScript UI组件库，并使用其中的组件RadSideDrawer创建一个示例应用程序。

最后一章结束后我们的学习并没有告一段落！还有七个附录在等着你。

· 附录A整理与Svelte、Sapper和Svelte Native相关的资料的链接。

· 附录B介绍如何使用Fetch API请求REST服务。

· 附录C介绍在第17章中使用过的MongoDB数据库。

· 附录D介绍如何配置和使用ESLint来检查应用程序中的问题。

· 附录E介绍如何配置和使用Prettier来格式化Svelte和Sapper应用程序中的代码。

· 附录F介绍在使用VS Code开发Svelte和Sapper应用程序时所用到的几种插件。

· 附录G介绍如何使用Snowpack构建Svelte应用程序。Snowpack与传统的编译工具(如Webpack、Rollup和Parcel)相比，是一种更高效的构建Web应用程序的工具。

在《Svelte和Sapper实战》中，我们将开发一个Travel Packing应用程序。《Svelte和Sapper实战》中的大部分章节都围绕这个应用程序展开讨论，并以它为基础添加对应的功能。

对于Svelte新手来说，应该首先按照顺序读完《Svelte和Sapper实战》的第1～8章，这八章涵盖了Svelte的核心理念。之后可以根据兴趣和需要有选择地进行阅读。当然，如果你有使用Svelte的经验，那么可以根据兴趣从《Svelte和Sapper实战》的任何章节开始阅读。

关于代码

可扫描封底二维码来下载相关代码。

《Svelte和Sapper实战》中包含了很多用于演示的源代码，既有通过编号列举出来的，也有与正文混排在一起的。上述两种源代码会被格式化为等宽字体。有一些代码还会被特意加粗以强调其与之前章节中代码的区别，比如当为之前的代码添加一段新功能，新功能的代码就会被加粗。

有些情况下，源代码已经被重新格式化过了；为适应《Svelte和Sapper实战》印刷的排版，额外增加了换行符，并重新设计了缩进。然而在极少数情况下，换行符和缩进也无法解决排版混乱的问题，为此会增加续行标记(?)来调整排版。此外，代码的注释会被从代码清单中删除，而是在代码清单外的其他地方标注出来，以强调注释的重要性。

其他在线资源

附录A列出了一系列在线资源。其中的大多数都与Svelte和Sapper有直接关系，但也有一些涵盖了适合于所有Web开发的内容。

关于彩图

正文中有时提到界面颜色，由于《Svelte和Sapper实战》是黑白印刷，将无法显示彩色。请读者在实际操作过程中从计算机屏幕上查看；另外，也可扫描封底二维码下载彩图。

目    录

 

第Ⅰ部分  起步  

第1章  初识Svelte   2

1.1  Svelte介绍   3

1.1.1  为什么选择Svelte   3

1.1.2  重新思考响应式设计   7

1.1.3  Svelte的缺点   9

1.1.4  Svelte原理   9

1.1.5  Svelte“消失”了？   11

1.2  Sapper介绍   11

1.2.1  为什么选择Sapper？   11

1.2.2  Sapper的工作方式   13

1.2.3  Sapper适用的场景   13

1.2.4  Sapper不适用的场景   13

1.3  Svelte Native介绍   13

1.4  Svelte与其他框架对比   14

1.4.1  Angular   14

1.4.2  React   14

1.4.3  Vue   14

1.5  开发工具   15

1.6  小结   15

第2章  第一个Svelte应用程序   16

2.1  Svelte REPL   16

2.1.1  Svelte REPL的使用   17

2.1.2  第一个REPL应用程序   18

2.1.3  保存REPL应用程序   22

2.1.4  分享REPL应用程序   24

2.1.5  REPL URL   24

2.1.6  导出REPL应用程序   24

2.1.7  引用npm包   25

2.1.8  REPL限制   25

2.1.9  CodeSandbox   26

2.2  在REPL之外开发   26

2.2.1  npx degit入门   27

2.2.2  package.json   28

2.2.3  关键代码   29

2.2.4  你的第一个本地Svelte应用程序   31

2.3  奖金应用程序   32

2.4  小结   36

第Ⅱ部分  深入探讨Svelte

第3章  创建组件   38

3.1  .svelte文件内容   39

3.2  组件标记   39

3.3  组件名称   42

3.4  组件样式   42

3.5  CSS特异性   43

3.6  作用域样式和全局样式   45

3.7  使用CSS预处理器   47

3.8  组件逻辑   47

3.9  组件状态   49

3.10  响应式语句   49

3.11  模块上下文   52

3.12  构建自定义组件   53

3.13  构建Travel Packing应用程序   54

3.14  小结   57

第4章  块结构   59

4.1  使用{#if}条件逻辑   59

4.2  使用{#each}迭代   61

4.3  使用{#await}处理promise   62

4.4  构建Travel Packing应用程序   65

4.4.1  Item组件   66

4.4.2  实用函数   67

4.4.3  Category组件   68

4.4.4  Checklist组件   70

4.4.5  App组件   73

4.4.6  运行应用程序   74

4.5  小结   75

第5章  组件通信   76

5.1  组件通信方式   77

5.2  props   77

5.2.1  属性通过export传入   77

5.2.2  属性改变时的响应   79

5.2.3  属性类型   80

5.2.4  指令   81

5.2.5  表单元素中的bind指令   81

5.2.6  bind:this   84

5.2.7  使用bind导出属性   85

5.3  slot   89

5.4  事件   90

5.4.1  事件派发   90

5.4.2  事件转发   92

5.4.3  事件修饰符   92

5.5  context   92

5.6  构建Travel Packing应用程序   94

5.7  小结   97

第6章  store   98

6.1  可写store   98

6.2  可读store   100

6.3  在合适的地方定义store   100

6.4  使用store   101

6.5  派生store   107

6.6  自定义store   108

6.7  结合类使用store   109

6.8  持久化store   113

6.9  构建Travel Packing应用程序   114

6.10  小结   114

第7章  DOM交互   115

7.1  插入HTML   115

7.2  action   118

7.3  tick函数   119

7.4  实现对话框组件   122

7.5  拖曳   125

7.6  继续构建Travel Packing应用程序   127

7.7  小结   129

第8章  生命周期函数   130

8.1  安装   130

8.2  onMount生命周期函数   132

8.2.1  移动焦点   132

8.2.2  检索来自API服务的数据   132

8.3  onDestroy生命周期函数   133

8.4  beforeUpdate生命周期函数   135

8.5  afterUpdate生命周期函数   136

8.6  使用辅助函数   137

8.7  进一步构建Travel Packing应用程序   139

8.8  小结   139

第9章  客户端路由   140

9.1  手动路由   140

9.2  hash路由   148

9.3  使用page.js库   150

9.4  结合page.js使用路径参数和查询参数   151

9.5  完善Travel Packing应用程序   155

9.6  小结   156

第10章  动画   157

10.1  缓动函数   158

10.2  svelte/animation包   158

10.3  svelte/motion包   160

10.4  svelte/transition包   164

10.5  fade过渡效果和flip动画效果   165

10.6  crossfade过渡效果   167

10.7  draw过渡效果   169

10.8  自定义过渡效果   170

10.9  transition与in和out   172

10.10  过渡事件   172

10.11  为Travel Packing应用程序添加动画效果   173

10.12  小结   175

第11章  调试   176

11.1  @debug标签   176

11.2  响应式语句   179

11.3  Svelte开发者工具   179

11.4  小结   182

第12章  测试   183

12.1  使用Jest进行单元测试   184

12.1.1  为Todo应用程序添加单元测试   186

12.1.2  为Travel Packing应用程序增加单元测试   188

12.2  使用Cypress执行端到端测试   193

12.2.1  对Todo应用程序执行端到端测试   194

12.2.2  对Travle Packing应用程序执行端到端测试   196

12.3  无障碍可访问性测试   200

12.3.1  Svelte compiler   201

12.3.2  Lighthouse   201

12.3.3  axe   204

12.3.4  WAVE   206

12.4  使用Storybook展示并调试组件   208

12.5  小结   216

第13章  部署   217

13.1  使用HTTP服务器部署Sevlte应用程序   217

13.2  Netlify使用   218

13.2.1  通过Netlify页面部署应用程序   218

13.2.2  通过Netlify命令行部署应用程序   219

13.2.3  Netlify收费计划   221

13.3  Vercel使用   221

13.3.1  通过Vercel页面部署应用程序   221

13.3.2  通过Vercel命令行部署应用程序   222

13.3.3  Vercel收费计划   222

13.4  Docker使用   223

13.5  小结   223

第14章  Svelte高级特性   224

14.1  表单校验   225

14.2  使用CSS框架   228

14.3  特殊元素   232

14.4  引用JSON文件   235

14.5  创建组件库   236

14.6  Web Components   237

14.7  小结   241

第Ⅲ部分  深入探讨Sapper   

第15章  你的第一个Sapper应用程序   244

15.1  创建一个全新的Sapper应用程序   245

15.2  使用Sapper重新开发购物应用程序   247

15.3  小结   250

第16章  Sapper应用程序   251

16.1  Sapper项目的文件结构   252

16.2  页面路由   254

16.3  页面布局   256

16.4  错误处理   258

16.5  在服务端和客户端运行代码   258

16.6  Fetch API包装器   259

16.7  预加载   259

16.8  预请求   262

16.9  代码分割   263

16.10  构建Sapper版本的Travel Packing应用程序   264

16.11  小结   267

第17章  Sapper服务端路由   268

17.1  服务端路由的源文件   269

17.2  服务端路由函数   269

17.3  一个CRUD的例子   270

17.4  切换至Express   277

17.5  构建Travel Packing应用程序   278

17.6  小结   284

第18章  使用Sapper导出静态站点   285

18.1  Sapper的细节   286

18.2  何时使用导出功能   286

18.3  应用程序示例   287

18.4  小结   295

第19章  Sapper的离线支持   296

19.1  service worker概述   297

19.2  缓存策略   298

19.3  Sapper service worker配置   300

19.4  service worker事件   301

19.5  在Chrome中管理

service worker   302

19.6  在Sapper服务器中开启HTTPS   306

19.7  验证离线功能   307

19.8  构建Travel Packing应用程序   308

19.9  小结   312

第Ⅳ部分  Svelte和Sapper的其他相关知识

第20章  预处理器   314

20.1  自定义预处理器   315

20.2  svelte-preprocess包   317

20.2.1  auto-preprocessing模式   317

20.2.2  外部文件   318

20.2.3  全局样式   319

20.2.4  使用Sass   320

20.2.5  使用TypeScript   320

20.2.6  VS Code提示   322

20.3  使用Markdown   322

20.4  使用多个预处理器   324

20.5  图像压缩   325

20.6  小结   325

第21章  Svelte Native   326

21.1  内置组件   327

21.1.1  展示组件   327

21.1.2  表单组件   328

21.1.3  行为组件   328

21.1.4  对话框组件   329

21.1.5  布局组件   329

21.1.6  导航组件   331

21.2  Svelte Native入门   332

21.3  本地开发Svelte Native应用程序   333

21.4  NativeScript样式实现   334

21.5  预定义NativeScript CSS类   335

21.6  NativeScript 主题   337

21.7  综合示例   337

21.8  NativeScript UI组件库   353

21.9  Svelte Native的问题   357

21.10  小结   358

附录A  资源   359

附录B  调用REST服务   365

附录C  MongoDB   368

附录D  Svelte的ESLint配置   375

附录E  在Svelte中使用Prettier   377

附录F  VS Code   379

附录G  Snowpack   383

现在,很多Web框架都要加载大量“备用"代码，造成应用程序结构杂乱、运行缓慢。Svelte 是一个对开发人员友好的创新工具，能用更少代码实现更多功能;编译后的应用程序非常小，加载时间更短。将Svelte和Sapper框架结合使用，页面路由、服务端渲染、静态页面开发将变得简单且灵活。

《Svelte和Sapper实战》一书将讲述如何设计和构建快捷、优雅的Web应用程序。你将学习如何创建Svelte组件和出色的UX，并将开发一个卓越的Travel Packing应用程序。你将掌握Svelte特有的状态管理器模型，学会使用Sapper简化页面路由，并学习现代前端领域的一些**实践，如代码分割、离线支持和服务器渲染的视图。

R. Mark Volkmann从1996年开始就提供软件咨询和培训服务，目前是位于圣路易斯的Object Computing公司的合作人。作为一名资深的咨询顾问，Mark为很多公司提供JavaScript、Node.js、Svelte、React、Vue、Angular等方面的帮助，创建并讲授了许多课程，包括React、Vue、AngularJS、Node.js、jQuery、JavaScript、HTML5、CSS3、Ruby、Java和XML。他经常面向圣路易斯地区的用户发表演讲，并出席各种会议，包括Nordic.js、Jfokus、NDC Oslo、Strange Loop、MidwestJS、No Fluff Just Stuff和XML DevCon。Mark长期撰写各类关于软件开发的文章，这些文章收录在https://objectcomputing.com/resources/publications/mark-volkmann。

在业余时间，Mark爱好跑步，已经在39个州参加了49场马拉松比赛。