主要内容 ●创建 Svelte组件 ●通过store管理共享数据 ●配置页面路由 ●调试、测试和部署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