![]()
作者 | Mark Volkmann译者 | 王强 编辑 | 张之栋、王文婧
近年来，Web 框架层出不穷，作为主流 Web 框架之一的 Svelte，有着独特的优势。它不仅可以构建完整的 Web 应用程序，还可以创建自定义元素，并在其他框架实现的已有 Web 应用程序中使用。本文将对 Svelte 进行详细的介绍，并带领读者了解使用 Svelte 从头开始构建 Web 应用程序所需的基础知识。
Svelte 是 React、Vue 和 Angular 等 Web 框架的替代方案。与其同类产品一样，Svelte 可用于构建完整的 Web 应用程序。它还能用来创建自定义元素，这些自定义元素可以在使用其他框架实现的已有 Web 应用程序中使用。
Svelte 由 Rich Harris 开发，Rich Harris 曾在《卫报》工作，目前任职于《纽约时报》。Harris 先前创建的 Ractive Web 框架被《卫报》采用，并成为 Vue 的部分功能的灵感来源。Harris 还创建了 Rollup 模块打包器，它是 Webpack 和 Parcel 的替代品。
Svelte 尚未得到应有的重视。人们提到它时往往更关注它生成打包代码的能力，它打包出来的代码明显比竞争对手更小。但除此之外 Svelte 还简化了许多工作，包括定义组件、管理组件状态、管理应用程序状态以及添加动画等。
本文对 Svelte 进行了详尽的介绍，并提供了使用它从头开始构建 Web 应用程序所需的基础知识。
与其他 Web 框架创建的应用程序相比，Svelte 应用程序的包体积较小。它将应用程序代码编译到一个只包含少量框架代码的优化过的 JavaScript 文件来做到了这一点。
Svelte 是用 TypeScript 实现的 Web 应用程序编译器。它不是运行时库。例如，稍后介绍的 Todo 应用程序的包体积只有等效 React 应用程序的 13％。这两款应用程序的链接如下：
https://github.com/mvolkmann/svelte-todo
https://github.com/mvolkmann/react-todo
一项调查统计了现实世界中 Web 应用使用多种 Web 框架构建的相关数据。统计显示，使用一些流行框架的应用经过 gzip 压缩后的大小 （KB）分别为：
https://www.freecodecamp.org/news/a-realworld-comparison-of-front-end-frameworks-with-benchmarks-2019-update-4be0d3c78075/
某些 Web 框架（包括 React 和 Vue）使用虚拟 DOM 来优化渲染更改。重新渲染组件时，框架会在内存中构建 DOM 的新版本，然后将其与以前的版本做对比，不一样的部分才会被应用到实际的 DOM 上。
尽管这比更新实际 DOM 中的所有内容要快，但构建虚拟 DOM 并将其与前一个 DOM 进行比较是需要花时间的。
Svelte 无需使用虚拟 DOM 就可以提供反应性。为了做到这一点，它会跟踪影响各个组件渲染的顶级组件变量的更改，并仅在检测到更改时才重新渲染 DOM 的这些部分。这样就能获得良好的性能表现。
Svelte 大大简化了组件和应用程序状态管理。相关功能包括上下文、存储和模块上下文，稍后将逐一详细介绍。
Svelte 为可访问性问题提供了运行时警告。例如，没有 alt 属性的<img>元素会被标记出来。Svelte 当前不支持 TypeScript，但正在推进相关工作。Svelte Native 支持开发移动应用程序。它基于 NativeScript。
有人说一旦应用程序构建完毕，Svelte 就会消失。
Svelte 库主要由 node_modules/svelte 目录中的.js 文件定义。主要函数在 internal.js 中定义，目前大约有 1400 行代码。
输入 npm run build 会在 public 目录中生成文件，包括 bundle.js。应用程序使用的 Svelte 库函数将复制到 bundle.js 的顶部。后文展示的 Todo 应用程序中，这里大约是 500 行代码。
因此 Svelte 库代码不会消失，只是它与其他 Web 框架相比体积很小。
下面是学习 Svelte 时需要查看的重要资源列表：
这是 Rich Harris 在 You Gotta Love Frontend（YGLF）Code Camp 2019 上的演讲。它解释了 Svelte 3 背后的动力，并提供了一些简要介绍。
想要尝试编写少量 Svelte 代码的话这个网站很有用。它还可以显示生成的代码并保存代码，以供分享和提交问题。
Svelte 提供了 markup 语法来等待 promise 解析或拒绝。它可以根据 promise 的未完成、已解析或已拒绝的状态提供不同的输出。
以下示例假定组件具有返回 Promise 的 getData 函数。在:then 和:catch 之后可以使用任何变量名来接收解析或拒绝的值。
{#await getData()} <div>Waiting for data ...</div>{:then result} <div>result = {result}</div>{:catch error} <div class="error">Error: {error.message}</div>{/await}
下一个示例在等待 Promise 解析时省略了要渲染的 markup。:catch 部分也可以省略。
{#await getData() then result} <div>result = {result}</div>{:catch error} <div class="error">Error: {error.message}</div>{/await}
插槽允许子内容传递到组件。接收组件可以决定是否渲染它，在何处渲染。请注意，空格算作子内容。接收组件可以标记使用
渲染所有子内容的位置。这称为 默认插槽。
它还可以为没有向插槽提供内容的父元素提供默认内容来渲染。例如，<slot>Thanks for nothing!</slot>。
命名插槽允许父元素提供多组内容，接收组件可以针对这些内容决定是否渲染以及在何处渲染。父元素使用 slot 属性标识它们。子元素则定义它们在何处用带有匹配的 name 属性的 slot 元素来渲染。
下面是来自父元素的 HTML 示例，该 HTML 元素的目标是子元素 ShippingLabel 中的多个命名槽：
<ShippingLabel> <div slot="address"> 123 Some Street,<br /> Somewhere, Some State 12345 </div> <div slot="name">Mark Volkmann</div></ShippingLabel>
这是 ShippingLabel.svelte：
<style> label { display: block; font-weight: bold; }</style><div> <label>Ship To:</label> <slot name="name">unknown</slot> <slot name="address" /></div>
像input、textarea和select这样的表单元素可以绑定到变量上。这将模拟双向数据绑定。
除了提供当前值之外，双向数据绑定还提供事件处理，以便在用户更改表单元素值时更新变量。
对于类型为 number 或 range 的input元素，双向数据绑定会自动将值从字符串强制转换为数字。例如，考虑以下 HTML 表单：
![]()
这是使用单个 Svelte 组件的实现。注意在多处使用了 bind:。
<script> const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple']; const flavors = ['vanilla', 'chocolate', 'strawberry']; const seasons = ['Spring', 'Summer', 'Fall', 'Winter']; let favoriteColor = ''; let favoriteFlavors = []; let favoriteSeason = ''; let happy = true; let name = ''; let story = '';</script><style> div { margin-bottom: 10px; } input, select { border: solid gray 1px; border-radius: 4px; padding: 4px; } input[type='checkbox'], input[type='radio'] { margin-left: 5px; } label { display: inline-block; font-weight: bold; margin-right: 5px; vertical-align: top; }</style><div class="form"> <div> <label>Name</label> <input type="text" bind:value={name} /> </div> <div> <label>Happy?</label> <!-- 对于 checkbox, 要绑定到"checked"属性而非"value"上。--> <input type="checkbox" bind:checked={happy} /> </div> <div> <label>Favorite Flavors</label> {#each flavors as flavor} <label> <!-- 使用"bind:group"和一组相关的 checkbox 使值成为一组字符串。--> <input type="checkbox" value={flavor} bind:group={favoriteFlavors} /> {flavor} </label> {/each} </div> <div> <label>Favorite Season</label> {#each seasons as season} <label> <!-- 使用"bind:group"和一组相关的 radio 按钮 使值成为单个字符串。--> <input type="radio" value={season} bind:group={favoriteSeason} /> {season} </label> {/each} </div> <div> <label>Favorite Color</label> <!-- 要将选项更改为可滚动列表以启用多重选项，添加 "multiple"属性。--> <select bind:value={favoriteColor}> <option /> {#each colors as color} <!-- <option> 元素可以有一个"value"属性 其值可以是字符串、数字或对象。--> <option>{color}</option> {/each} </select> </div> <div> <label>Life Story</label> <textarea bind:value={story} /> </div> <!-- 这里报告了绑定设置的变量值，但前提是 name 有值。--> {#if name} <div> {name} likes {favoriteColor}, {favoriteSeason}, and is {happy ? 'happy' : 'unhappy'}. </div> <div>{name}'s favorite flavors are {favoriteFlavors}.</div> <div>Story: {story}</div> {/if}</div>
除了绑定到基本变量之外，表单元素还可以绑定到对象属性。然后用户输入会使这些对象发生突变。
Svelte 可以将子组件 prop 绑定到父组件中的变量。这将允许子组件更改父组件变量的值。例如，这是父组件：
<script> import Child from './Child.svelte'; let pValue = 1;</script><div>pValue = {pValue}</div><Child bind:cValue={pValue} />
这是子组件：
<script> export let cValue = ''; const double = () => (cValue *= 2);</script><div>cValue = {cValue}</div><button on:click={double}>Double</button>
按下 Child 组件中的按钮时，cValue 会加倍，并且加倍的值由于绑定到 cValue 而成为 pValue 的新值。
事件处理由 on:event-name 属性指定，该属性的值是调度事件时要调用的函数。事件名称可以是标准 DOM 事件或自定义事件的名称。事件对象将传递给给定的函数。例如：
<!-- 函数 "handleClick" 必须在上面的<script>部分中定义。--><button on:click={handleClick}>Press Me</button><!-- 这里用匿名函数展示了内联事件处理。它为按钮设置了变量"clicked"到 DOM 元素。--><button on:click={event => clicked = event.target}>Press Me</button>
可以为同一个事件指定多个事件处理函数，并且在分派事件时将分别调用每个函数。例如：
<button on:click={doOneThing} on:click={doAnother}>Press Me</button>
事件处理程序可以使用修饰符名称前面的竖线指定任意数量的事件修饰符。例如：
<button on:click|once|preventDefault={handleClick}>Press Me</button>
支持的修饰符有：capture它导致处理程序函数仅在捕获阶段，而不是默认的冒泡阶段被调用。once它将在第一次发生事件后删除处理程序。passive它可以提高滚动性能。preventDefault它可以防止事件的默认操作发生。例如，它可以停止表单提交。stopPropagtion它可以防止捕获 / 冒泡流程中的后续处理程序被调用。
从 on: 属性中省略事件处理函数可以快速将事件转发到父组件。例如，假设组件结构的一部分是 A> B> C，并且 C 发出事件“foo”。B 可以使用<C on:foo/>将其转发到 A。请注意，on: 属性没有值。此方法也可以用于转发 DOM 事件。
组件可以调度事件。例如：
<script> import {createEventDispatcher} from 'svelte'; // 组件实例化时必须调用, // 可选或稍后调用都不行。 const dispatch = createEventDispatcher(); function sendEvent() { // 事件关联的数据可以是一个原语或对象。 // 事件名称不应包含横线。 dispatch('someEventName', optionalData); }</script>
这些事件仅转到父组件。它们不会自动在组件结构中冒泡。
父组件使用 on: 侦听子组件的事件。例如，如果父组件定义了函数 handleEvent，则它可以在 Child 组件分派具有给定名称的事件时注册要调用的函数。
<Child on:someEventName = {handleEvent} />
Svelte 支持在组件实例的生命周期中发生四个特定事件时调用注册函数。这些事件包括：
-
-
-
-
被销毁时。
术语“已挂载”表示已将组件实例添加到 DOM。术语“被销毁”表示该组件实例已从 DOM 中删除。要为这些事件注册函数，请从 svelte 包中导入所提供的生命周期函数。
import {afterUpdate, beforeUpdate, onDestroy, onMount} from 'svelte';
然后调用这些函数，并在事件发生时向它们传递要调用的函数。
最常用的生命周期函数是 onMount。一种用法是将焦点移至给定的表单元素。另一种用途是从 REST 服务检索组件所需的数据。
下面是一个移动焦点的示例。
<script> import {onMount} from 'svelte'; let name = ''; let nameInput; onMount(() => nameInput.focus());</script><input bind:this={nameInput} bind:value={name} />
属性 bind:this 会将指定为其值的变量设置为对 input 的 DOM 元素的引用。这在传递给 onMount 的函数中使用，以将焦点移至 input。
从 DOM 中删除组件实例时，使用 onDestroy 注册要调用的函数的另一种方法是从通过 onMount 注册的函数返回该函数。这种方法有点像 React 中的 useEffect hook，不同之处在于 Svelte 中传递给 useEffect 的函数在挂载和更新时都运行。
生命周期函数可以从辅助函数中调用。这些可以在单独的.js 文件中定义，从而导入它们并用于多个组件。这很像定义自定义的 React hooks。
建议以“on”开头命名这些辅助函数，就像 React hook 名称以“use”开头那样。
将特定元素添加到 DOM 时，动作（Action） 会注册要调用的函数。
动作是在具有属性 use:fnName = {args}的元素上指定的。已注册的函数将传递 DOM 元素和参数（如果存在）。如果不需要除元素以外的其他参数，则省略 = {args}。
这在某种程度上与 onMount 生命周期函数有关，该函数注册了将组件的每个实例添加到 DOM 时要调用的函数。将组件中的特定元素添加到 DOM 时，就将调用动作。例如：
<script> let name = ''; const focus = element => element.focus();</script><!-- 输入元素添加到 DOM 时调用焦点函数。--><input bind:value={name} use:focus />
动作函数可以选择返回具有 update 和 destroy 属性（也就是函数）的对象。这个功能不常用。
每当参数值更改时都会调用 update 函数。如果没有参数当然是不行的。
从 DOM 中删除元素时将调用 destroy 函数。
上下文（Context） 提供了一种替代方法，可以使用 props 和存储（接下来介绍）来使组件中的数据在其他组件中可用。上下文数据只能在后代组件中访问。
要在组件中定义上下文，请导入 setContext 函数并调用它，并提供上下文键和值。例如：
import {setContext} from 'svelte';// Must be called during component instantiation.setContext('favorites', {color: 'yellow', number: 19});
要在后代组件中使用上下文，请导入 getContext 函数并调用它，并提供上下文键。这将从已使用该键定义上下文的最近的祖先组件获取上下文值。例如：
import {getContext} from 'svelte';// 组件实例化时必须调用。const favorites = getContext('favorites');
上下文键可以是任何类型的值，不只是字符串。
上下文值可以是任何类型的值，包括具有后代组件可以调用的方法的对象和函数。
如果创建了上下文的组件再使用相同的键和不同的值调用 setContext，则后代组件将不会接收到更新。它们只能看到组件初始化期间可用的内容。
与 props 和存储不同，上下文不是响应式的。
下面是一个使用上下文使数据在后代组件中可用的示例。
<!-- In A.svelte --><script> import {setContext} from 'svelte'; import B from './B.svelte'; setContext('favorites', {color: 'yellow', number: 19});</script><div> This is in A. <b ></b></div><!-- In B.svelte --><script> import C from './C.svelte';</script><div> This is in B. <C /></div><!-- In C.svelte --><script> import {getContext} from 'svelte'; const {color, number} = getContext('favorites');</script><div> This is in C. <div>favorite color is {color}</div> <div>favorite number is {number}</div></div>
这将渲染以下内容：
This is in A.This is in B.This is in C.favorite color is yellowfavorite number is 19
存储（Stores） 在所有组件外部保持应用程序状态。它们是使用 props 或上下文来使数据在组件中可用的替代方法。
对于应该对所有组件可用的存储，请在 src/stores.js 之类的文件中定义并导出它们，并在需要时从该文件导入它们。
对于应该仅对给定组件的后代可用的存储，请在这个组件中定义它们，然后使用 props 或上下文将它们传递给后代。
-
-
-
派生存储——这些存储从其他存储的当前值派生数据。
这些存储都有一个 subscribe 方法，该方法返回一个可调用的函数来 unsubscribe。也可以创建自定义存储。它们唯一的限制是成为具有正确实现的 subscribe 方法的对象。
示例：https://svelte.dev/tutorial/custom-stores
要创建可写存储，请调用 svelte/store 包中定义的 writable 函数。然后传递初始值，还可以传递一个带有 set 函数的函数。如果传入了后者，它可以异步确定存储的值。例如，它可以调用 REST 服务，并将返回的值传递给 set。在第一个组件订阅存储之前不会调用此函数。
除了 subscribe 方法外，可写存储还有以下方法：
这将基于当前值更新存储值。fn 是一个传递当前值并返回新值的函数。
下面是仅使用初始值定义可写存储的示例。
// 在 stores.js 内import {writable} from 'svelte/store';// 初始值是空数组。export const dogStore = writable([]);
这是一个使用函数确定值来定义可写存储的示例。
// 在 stores.js 内import {writable} from 'svelte/store';export const dogStore = writable(initialValue, async set => { // 订阅计数由 0 到 1 时调用。 // 计算初始值并传递给 set 函数。 const res = await fetch('/dogs'); const dogs = await res.json(); set(dogs); return () => { // 订阅计数归零时调用。 };});
可以将表单元素的值绑定到可写存储。当用户更改表单元素值时将更新存储。
<input bind:value={$someStore} />
存储名称上的 $ 前缀接下来会解释。
要创建可读存储，请调用 svelte/store 包中定义的 readable 函数。
与可写存储一样，这里要为它传递一个初始值，还可以传递一个带有 set 函数的函数。例如：
import {readable} from 'svelte/store';export const dogStore = readable( [], // 初始值。 set => { const res = await fetch('/dogs'); const dogs = await res.json(); set(dogs); // 这里可以返回一个清理函数。 });
set 函数可以使用 setInterval 来连续更改值。
-
-
-
从.js 文件导入（适用于全局范围）。
-
在其上调用 subscribe 方法（有些冗长）。
-
使用自动订阅的捷径（通常是首选）。
下面是使用 subscribe 方法的示例。
<script> import {onDestroy} from 'svelte'; import {dogStore} from './stores.js'; let dogs; const unsubscribe = dogStore.subscribe(value => (dogs = value)); onDestroy(unsubscribe);</script><!-- 在 HTML 中使用 dogs。-->
下面是使用自动订阅的示例。
名称以 $ 开头的所有变量都必须放入存储。通过这种方法，组件在首次使用时会自动订阅存储，而被销毁时会自动取消订阅。
<script> import {dogStore} from './stores.js';</script><!-- 在 HTML 中使用 $dogStore。-->
下面是更改可写存储的示例。
订阅存储的组件将看到更改。
<script> import {dogStore} from './stores.js'; import Child from './Child.svelte'; const dog = $dogStore; function changeDog() { // 方法 #1 - 创建新对象 //dogStore.set({age: 2, breed: 'GSP', name: 'Oscar'}); // 方法 #2 - 调整并复用对象 dog.age = 2; dog.breed = 'GSP'; dog.name = 'Oscar'; dogStore.set(dog); }</script><h1>Store Demo</h1><Child /><button on:click={changeDog}>Change Dog</button>
下面是一个使用 HTML 中的 $ 引用从存储中获取更改的示例。
<script> import {dogStore} from './stores.js';</script><div> {$dogStore.name} is a {$dogStore.breed} that is {$dogStore.age} years old.</div>
下面的代码效果同上，但是使用 JavaScript 代码从存储中获取数据。
<script> import {dogStore} from './stores.js'; // 这里需要 Parens 才能知道开放的大括号不是块的开头。 $: ({age, breed, name} = $dogStore);</script><div>{name} is a {breed} that is {age} years old.</div>
想要只在组件源文件中运行一次 JavaScript 代码，而不是为创建的每个组件实例都运行一次代码，请将代码包含在指定模块上下文的 script 标记中。
<script context="module"> ...</script>
如果 script 标记未指定其上下文，则它为 实例上下文。
两种 script 标记（实例和 模块上下文）都可以出现在组件源文件中。
两种上下文中都可以导出值。无法指定默认导出，因为组件本身会自动成为默认导出。
模块上下文可以声明变量并定义函数。这些可以在组件所有实例的实例上下文中访问，但它们不是响应式的。组件更改时不会重新渲染。这样就能在所有实例之间共享数据。
实例上下文变量和函数在模块上下文中不可访问。
请注意，不需要将不访问组件状态的函数移至模块上下文，因为（根据 Svelte API 文档）“ Svelte 将从组件定义中提升所有不依赖本地状态的函数。” 但将函数放在模块上下文中的一个目的是从外部导出和调用它们。
可以更改顶级组件变量的值来使组件状态无效。
根据 Svelte 文档，“当你使 Svelte 中的组件状态无效时，它不会立即更新 DOM。相反，它会等到下一个微任务才查看是否需要应用其他任何更改（包括在其他组件中）。这样做避免了不必要的工作，并使浏览器可以更有效地对事物进行批处理。”
tick 函数“返回一个 promise，该 promise 将在任何未决状态更改应用于 DOM 时立即解析（如果没有未决状态更改，则立即解析）。”
应用 DOM 更新后，可以使用此方法进行其他状态更改。
<script> import {tick} from 'svelte'; ... // 做一些状态更改。 // 下面的内容预防 tick 调用后的批量更新。 await tick(); // DOM 更新后做更多状态更改。 ...</script>
调用 await tick() 在测试中也很有用，可以在测试效果之前等待更改被处理。
Svelte 提供了许多功能用来轻松将动画添加到元素。以下是它提供的一些函数和过渡效果值。
下面是一个基本的动画示例，其中有一个列表项在装载时淡入并在销毁时淡出。
<script> import {fade} from 'svelte/transition';</script><li transition:fade> <!-- 一些内容 --></li>
可以创建自定义动画。
示例：https://svelte.dev/tutorial/custom-css-transitions
组件可以侦听事件，以了解过渡何时开始和结束。需要侦听的事件有：
Svelte 支持几种特殊元素，其形式为<svelte:name props>。总结如下。
<svelte:component this = {expression} optionalProps>
它将渲染 expression 指定的组件。如果 expression 是虚值则不渲染任何内容。可选的 props 会被传递到要渲染的组件。
<svelte:self props>
它允许组件渲染其自身的实例。它支持递归组件，这是必需的，因为组件无法导入自身。
<svelte:window on:eventName={handler}>
它将注册一个由 DOM window 对象调度给定事件时要调用的函数。resize 事件就是一个例子。
<svelte:window bind:propertyName={variable}>
它会将变量绑定到 window 属性。一个例子是 innerWidth。
<svelte:body on:eventName={handler}>
当 DOM body 元素调度给定事件时，此方法注册一个要调用的函数。例子包括 mouseEnter 和 mouseLeave。
<svelte:head>elements</svelte:head>
它会将元素插入 DOM 文档的 head 元素中。例子包括插入 link 和 script 标记。
<svelte:options option={value} />
它位于.svelte 文件的顶部，而不是 script 标记内部。它指定了编译器选项，包括：
immutable
它意味着 props 将被视为不可变的，从而提供了优化。
默认值为 false。不可变意味着父组件将为对象 props 创建新对象，而不是修改现有对象的属性。这使 Svelte 可以通过对比对象引用（而不是对象属性）来确定 prop 是否已更改。
当此选项设置为 true 时，如果父组件修改了子组件的对象属性，则子组件将不会检测到更改并且不会重新渲染。
accessors
它为组件 props 添加了 getter 和 setter 方法。默认为 false。将 Svelte 组件编译为非 Svelte 应用程序中使用的自定义元素时，这个方法很有用。
namespace="value"
它指定了组件的命名空间。一种用途是为 SVG 组件指定命名空间 svg。
tag="value"
它指定将 Svelte 组件编译为自定义元素时要使用的名称。它允许 Svelte 组件用作非 Svelte 应用程序中的自定义元素。
当给定变量更改时，使用 @debug 中断，并在 devtools 控制台中输出它们的值。将其放置在 HTML 部分的顶部，不要放在script标记内部。例如：
{@debug var1, var2, var3}
被监视的变量可以具有任何类型的值，包括对象。要在所有状态更改时中断，请省略变量名称。
{@debug}
ESLint 称自己为“针对 JavaScript 和 JSX 的可插入式 linting 实用程序”。它可以报告许多语法错误和潜在的运行时错误。它还可以报告与指定编码准则的差异。
要在 Svelte 项目中安装 ESLint 所需的全部内容，请输入 npm install -D name，其中 name 为：
创建具有以下内容的.eslintrc.json 文件：
{ "env": { "browser": true, "es6": true, "jest": true }, "extends": ["eslint:recommended", "plugin:import/recommended"], "globals": { "cy": "readonly" }, "overrides": [ { "files": ["**/*.svelte"], "processor": ["svelte3/svelte3"] } ], "parserOptions": { "ecmaVersion": 2019, "sourceType": "module" }, "plugins": ["svelte3"], "rules": { "no-console": "off" }}
将以下 npm 脚本添加到 package.json：
"lint": "eslint --fix --quiet src --ext .js,.svelte",
要运行 ESLint，请输入 npm run lint。
有关针对 Svelte 的 ESLint 选项的更多信息，请参见 https://github.com/sveltejs/eslint-plugin-svelte3。
Prettier 称自己为“经过优化的 JavaScript 格式化程序”。它支持多种语言和语言功能，包括 ES2017、TypeScript、JSON、HTML、CSS、LESS、SCSS、JSX、Vue 和 Markdown。
要在 Svelte 项目中安装 Prettier 所需的全部内容，请输入 npm install -D name，其中 name 为：
Svelte ESLint 插件强制按script、style和 HTML 的顺序执行。将以下 npm 脚本添加到 package.json：
"format": "prettier --write '{public,src}/**/*.{css,html,js,svelte}'",
要运行 Prettier，请输入 npm run format。
下面来看一个简单的 Todo 应用程序的实现，正好过一遍最重要的那些 Svelte 概念。
代码链接：https://github.com/mvolkmann/svelte-todo
![]()
要添加新的待办事项时，需要在输入框中输入待办事项的文本，然后按“添加”按钮或 Enter 键。
要将待办事项在已完成和未完成的状态之间切换，需要单击其左侧的复选框。请注意，顶部附近的“remaining”文本显示当前未检查的待办事项数和待办事项总数。
要删除待办事项，需要单击其右侧的“Delete”按钮。
要存档所有已检查的待办事项，需要单击“Archive Completed”按钮。但这个版本的应用并不会真的存储它们，其实它们都被删掉了。
下面是文件 src/main.js，它在文档主体中渲染 TodoList 组件来启动应用程序。
import TodoList from './TodoList.svelte';const app = new TodoList({target: document.body});export default app;
下面是文件 src/Todo.svelte 中 Todo 组件的代码。
它需要一个名为“todo”的 prop 来保存待办事项的文本。切换复选框后，它将调度一个“toggleDone”事件。按下“Delete”按钮时，它将调度一个“删除”事件。
<script> import {createEventDispatcher} from 'svelte'; const dispatch = createEventDispatcher(); export let todo; // 唯一的 prop</script><style> /* 在 todo 的文本上画一条线标记其完成状态。*/ .done-true { color: gray; text-decoration: line-through; } li { margin-top: 5px; }</style><li> <input type="checkbox" checked={todo.done} on:change={() => dispatch('toggleDone')} /> <span class={'done-' + todo.done}>{todo.text}</span> <button on:click={() => dispatch('delete')}>Delete</button></li>
下面是文件 src/TodoList.svelte 中 TodoList 组件的代码。
看到这里，关于 Svelte 你已经很熟悉了，所以这些代码应该很容易看懂。
<script> import Todo from './Todo.svelte'; let lastId = 0; // 创建一个 todo 对象。 const createTodo = (text, done = false) => ({id: ++lastId, text, done}); let todoText = ''; // 应用程序初始有两个 todo 项目。 let todos = [ createTodo('learn Svelte', true), createTodo('build a Svelte app') ]; let uncompletedCount = 0; // 这是"响应式声明"。 // 它保证未完成的代码在 todo 数组修改时被更新。 $: uncompletedCount = todos.filter(t => !t.done).length; // 这是另一个"响应式声明"。 // 保证当 uncompletedCount 或 todo 数组更改时状态随时更新 $: status = `${uncompletedCount} of ${todos.length} remaining`; // 创建并添加一个新的 todo. function addTodo() { // 回想这里为何必须使用 concat 代替 push。 todos = todos.concat(createTodo(todoText)); todoText = ''; // 清空 input } // 删除全部标记为完成的 todo。 const archiveCompleted = () => (todos = todos.filter(t => !t.done)); // 删除特定 todo。 const deleteTodo = todoId => (todos = todos.filter(t => t.id !== todoId)); // 改变给定 todo 的状态。 function toggleDone(todo) { const {id} = todo; todos = todos.map(t => (t.id === id ? {...t, done: !t.done} : t)); }</script><style> button { margin-left: 10px; } /* 从加点（·）列表中移除点。*/ ul.unstyled { list-style: none; margin-left: 0; padding-left: 0; }</style><div> <h2>To Do List</h2> <div> {status} <button on:click={archiveCompleted}>Archive Completed</button> </div> <br /> <!-- 我们不想真的提交表单。 使用表单使得按下 enter 键时触发"Add"按钮。--> <form on:submit|preventDefault> <input type="text" size="30" autofocus placeholder="enter new todo here" bind:value={todoText} /> <button disabled={!todoText} on:click={addTodo}> Add </button> </form> <ul class="unstyled"> {#each todos as todo} <Todo todo={todo} on:delete={() => deleteTodo(todo.id)} on:toggleDone={() => toggleDone(todo)} /> {/each} </ul></div>
Svelte 组件的单元测试可以使用 Jest 实现。另外建议使用“Svelte 测试库”。它与 Jest 协作，可以简化 Svelte 组件的单元测试编写。
本文不会深入探究这些测试工具的细节，但下面提供了测试代码示例。要了解这些工具的更多信息，请访问：
https://jestjs.io/
https://testing-library.com/
要安装所需的全部内容，请输入 npm install -D name，其中 name 为：
使用以下内容创建文件 babel.config.js：
module.exports = { presets: [ [ '@babel/preset-env', { targets: { node: 'current' } } ] ]};
如果未按上面所示设置 targets.node，则在运行测试时将显示错误消息“regenerator-runtime not found”。
使用以下内容创建文件 jest.config.js：
module.exports = { transform: { '^.+ .js$': 'babel-jest', '^.+ .svelte$': 'jest-transform-svelte' }, moduleFileExtensions: ['js', 'svelte'], bail: false, verbose: true};
将 bail 设置为 false 意味着 Jest 在某个测试失败时不应退出测试套件。
将 verbose 设置为 true 会使 Jest 显示每个测试的结果，而不只是各个测试套件的结果摘要。
将以下 npm 脚本添加到 package.json：
"test": "jest --watch src",
要运行单元测试，请输入 npm test。
以下是用于测试文件 src/Todo.spec.js 中 Todo 组件的代码：
import {cleanup, render} from '@testing-library/svelte';import Todo from './Todo.svelte';describe('Todo', () => { const text = 'buy milk'; const todo = {text}; // 卸载之前测试中挂载的所有组件。 afterEach(cleanup); test('should render', () => { const {getByText} = render(Todo, {props: {todo}}); const checkbox = document.querySelector('input[type="checkbox"]'); expect(checkbox).not.toBeNull(); // 找到复选框 expect(getByText(text)); // 找到 todo 文本 expect(getByText('Delete')); // 找到 Delete 按钮 }); // 测试事件在 checkbox 状态更改或"Delete"按钮按下时是否 fired 没有捷径。 // 它们由 TodoList.spec.js 的测试覆盖。});
以下是用于测试文件 src/TodoList.spec.js 中 TodoList 组件的代码：
import {tick} from 'svelte';import {cleanup, fireEvent, render, wait} from '@testing-library/svelte';import TodoList from './TodoList.svelte';describe('TodoList', () => { const PREDEFINED_TODOS = 2; afterEach(cleanup); // 它被下面的很多测试函数使用。 function expectTodoCount(count) { return wait(() => { // 每个 todo 有一个<li>根元素。 const lis = document.querySelectorAll('li'); expect(lis.length).toBe(count); }); } test('should render', async () => { const {getByText} = render(TodoList); expect(getByText('To Do List')); expect(getByText('1 of 2 remaining')); expect(getByText('Archive Completed')); // 按钮 await expectTodoCount(PREDEFINED_TODOS); }); test('should add a todo', async () => { const {getByTestId, getByText} = render(TodoList); const input = getByTestId('todo-input'); const value = 'buy milk'; fireEvent.input(input, {target: {value}}); fireEvent.click(getByText('Add')); await expectTodoCount(PREDEFINED_TODOS + 1); expect(getByText(value)); }); test('should archive completed', async () => { const {getByText} = render(TodoList); fireEvent.click(getByText('Archive Completed')); await expectTodoCount(PREDEFINED_TODOS - 1); expect(getByText('1 of 1 remaining')); }); test('should delete a todo', async () => { const {getAllByText, getByText} = render(TodoList); const text = 'learn Svelte'; // 第一个 todo expect(getByText(text)); const deleteBtns = getAllByText('Delete'); fireEvent.click(deleteBtns[0]); // 删除第一个 todo await expectTodoCount(PREDEFINED_TODOS - 1); }); test('should toggle a todo', async () => { const {container, getByText} = render(TodoList); const checkboxes = container.querySelectorAll('input[type="checkbox"]'); fireEvent.click(checkboxes[1]); // 第二个 todo await tick(); expect(getByText('0 of 2 remaining')); fireEvent.click(checkboxes[0]); // 第一个 todo await tick(); expect(getByText('1 of 2 remaining')); });});
可以使用 Cypress 来实现 Svelte 应用程序的端到端测试。本文不会深入探究 Cypress 的细节，但是下面提供了测试代码示例。
要了解有关 Cypress 的更多信息，请访问 https://www.cypress.io/。
要安装Cypress，请输入npm install -D cypress。
将以下 npm 脚本添加到 package.json：
"cy:open": "cypress open","cy:run": "cypress run",
要以交互方式启动 Cypress 测试工具，请输入 npm run cy:open。如果尚不存在 cypress 目录，它还会创建一个带有以下子目录的目录：
fixtures
这个目录可以保存测试使用的数据。数据通常在导入到测试的.json 文件中。
integration
你的测试文件在此目录的顶部或子目录中。
plugins
此目录扩展了 Cypress 的功能。在运行每个规范文件之前，Cypress 会自动在该目录的 index.js 文件中运行代码。
screenshots
这个目录存放屏幕截图，截图通过调用 cy.screenshot() 生成。这在调试测试时很有用。
support
此处的文件会添加自定义的 Cypress 命令，使它们在测试中可用。在运行每个规范文件之前，Cypress 会自动在该目录的 index.js 文件中运行代码。
这些目录中装有示例文件，所有示例文件都可以删除。
在 cypress/integration 目录下创建带有.spec.js 扩展名的测试文件。
-
使用 npm run dev 启动应用程序服务器。
-
-
按下 Cypress 工具右上角的“Run all specs”按钮。
这将打开一个浏览器窗口，在其中运行所有测试。完成测试后，关闭此浏览器窗口和 Cypress 工具。
以下是文件 cypress/integration/TodoList.spec.js 中 Todo 应用程序的端到端测试代码。
const baseUrl = 'http://localhost:5000/';describe('Todo app', () => { it('should add todo', () => { cy.visit(baseUrl); cy.contains('1 of 2 remaining'); // "Add"按钮应被禁用，直到文本输入后才解除。 cy.contains('Add') .as('addBtn') .should('be.disabled'); // 输入 todo 文本。 const todoText = 'buy milk'; cy.get('[data-testid=todo-input]') .as('todoInput') .type(todoText); cy.get('@addBtn').should('not.be.disabled'); cy.get('@addBtn').click(); cy.get('@todoInput').should('have.value', ''); cy.get('@addBtn').should('be.disabled'); cy.contains(todoText); cy.contains('2 of 3 remaining'); }); it('should toggle done', () => { cy.visit(baseUrl); cy.contains('1 of 2 remaining'); // 找到第一个 checkbox 并打勾。 cy.get('input[type=checkbox]') .first() .as('cb1') .click(); cy.contains('2 of 2 remaining'); // 转换同一个 checkbox。 cy.get('@cb1').check(); cy.contains('1 of 2 remaining'); }); it('should delete todo', () => { cy.visit(baseUrl); cy.contains('1 of 2 remaining'); const todoText = 'learn Svelte'; // 第一个 todo cy.contains('ul', todoText); // 点击第一个"Delete"按钮。 cy.contains('Delete').click(); cy.contains('ul', todoText).should('not.exist'); cy.contains('1 of 1 remaining'); }); it('should archive completed', () => { cy.visit(baseUrl); const todoText = 'learn Svelte'; // 第一个 todo cy.contains('ul', todoText); // 点击"Archive Completed"按钮。 cy.contains('Archive Completed').click(); cy.contains('ul', todoText).should('not.exist'); cy.contains('1 of 1 remaining'); });});
要重新运行测试，请单击浏览器窗口顶部附近的圆形箭头按钮。
为了更好地调试，请在应用程序代码中添加 console.log 调用，然后在运行测试的浏览器窗口中打开 devtools 控制台。
将更改保存到应用程序源文件或测试文件时，测试将自动重新运行。
要以命令行模式启动 Cypress 测试工具，请输入 npm run cy:run。这将在终端窗口中输出测试结果，记录测试运行的视频，并输出视频的文件路径。双击视频文件即可观看。
这是“由 Svelte 支持的应用程序框架”。Sapper 是一名士兵，负责诸如修建和维修道路和桥梁，铺设和清除地雷等任务。Sapper 类似 Next 和 Gatsby。它提供路由、服务端渲染和代码拆分功能。
这是一个社区推动的项目，支持使用 Svelte 实现原生移动应用程序。它基于 nativescript-vue。
这是 Three.js 3D 图形库的 Svelte 版本，正在开发中。
Storybook 是用于演示和试验 Web UI 组件的工具。
到这里就结束了！Svelte 是当前流行的 React、Vue 和 Angular 框架的很好的替代品。它有许多好处，包括较小的包体积、简单的组件定义、方便的状态管理以及无需虚拟 DOM 的反应性。
非常感谢 Charles Sharp 和 Kristin Kroeger 审阅本文！
英文原文：
https://objectcomputing.com/resources/publications/sett/july-2019-web-dev-simplified-with-svelte
说句题外话，有不少人想加皇叔微信，皇叔姑且放出来，但是坑位有限哦
![]()
给公号“ 后厂村码农 ”加个星标吧，方便阅读。
喜欢就给个“在看”![]()
