Svelte 和 Sapper 實戰 Svelte and Sapper in Action

主要內容 ●創建 Svelte組件 ●通過store管理共享數據 ●配置頁面路由 ●調試、測試和部署Svelte 應用程序 ●使用Sapper開發動態網站和靜態網站

R. Mark Volkmann從1996年開始就提供軟件諮詢和培訓服務，目前是位於聖路易斯的Object Computing公司的合作人。作為一名資深的諮詢顧問，Mark為很多公司提供JavaScript、de.js、Svelte、React、Vue、Angular等方面的幫助，創建並講授了許多課程，包括React、Vue、AngularJS、de.js、jQuery、JavaScript、HTML5、CSS3、Ruby、Java和XML。他經常面向聖路易斯地區的用戶發表演講，並出席各種會議，包括rdic.js、Jfokus、NDC Oslo、Strange Loop、MidwestJS、 Fluff Just Stuff和XML DevCon。 Mark長期撰寫各類關於軟件開發的文章，這些文章收錄在https://objectcomputing.com/resources/publications/mark-volkmann。
在業餘時間，Mark愛好跑步，已經在39個州參加了49場馬拉鬆比賽。

第Ⅰ部分  起步  
第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