常見問題

我是 Svelte 新手，應該從哪裡開始？

我們認為最好的開始方式是玩過互動式教學。 每個步驟主要側重於一個特定方面，並且易於遵循。 您將直接在瀏覽器中編輯和執行真實的 Svelte 元件。

五到十分鐘應該足以讓您開始運行。一個半小時應該可以讓您完成整個教學。

我可以在哪裡獲得支援？

如果您的問題是關於某些語法，參考文件是一個不錯的起點。

Stack Overflow 是一個受歡迎的論壇，可以提出程式碼級別的問題，或者如果您遇到特定的錯誤。閱讀現有的問題，標記為 Svelte 或 提問您自己的問題！

有一些線上論壇和聊天室，非常適合討論最佳實踐、應用程式架構，或者只是為了認識其他 Svelte 使用者。我們的 Discord 或 Reddit 頻道就是例子。如果您有可解答的程式碼級別問題，Stack Overflow 通常更適合。

是否有任何第三方資源？

Svelte Society 維護著一個書籍和影片列表。

如何讓 VS Code 對我的 .svelte 檔案進行語法高亮？

有一個官方的 VS Code Svelte 擴充功能。

是否有工具可以自動格式化我的 .svelte 檔案？

您可以使用 prettier 和 prettier-plugin-svelte 外掛程式。

如何為我的元件編寫文件？

在使用 Svelte 語言伺服器的編輯器中，您可以使用特殊格式的註解為元件、函數和匯出編寫文件。

<script>
	/** What should we call the user? */
	export let name = 'world';
</script>

<!--
@component
Here's some documentation for this component.
It will show up on hover.

- You can use markdown here.
- You can also use code blocks here.
- Usage:
  ```tsx
  <main name="Arethra">
  ```
-->
<main>
	<h1>
		Hello, {name}
	</h1>
</main>

注意：@component 在描述您的元件的 HTML 註解中是必要的。

Svelte 可以擴展嗎？

最終會有一篇關於此的部落格文章，但同時，請查看此問題。

是否有 UI 元件庫？

有幾個 UI 元件庫以及獨立元件。在 Svelte Society 網站的元件頁面的設計系統部分下找到它們。

如何測試 Svelte 應用程式？

您的應用程式結構和邏輯定義的位置將決定確保其經過適當測試的最佳方法。重要的是要注意，並非所有邏輯都屬於元件內部 - 這包括諸如資料轉換、跨元件狀態管理和記錄等問題。請記住，Svelte 函式庫有自己的測試套件，因此您無需編寫測試來驗證 Svelte 提供的實作細節。

Svelte 應用程式通常會有三種不同的測試類型：單元、元件和端對端 (E2E)。

單元測試：專注於隔離測試業務邏輯。通常這是驗證個別函數和邊緣案例。通過最小化這些測試的表面積，可以保持它們的精簡和快速，並通過從 Svelte 元件中提取盡可能多的邏輯，可以使用它們覆蓋您的應用程式更多部分。在建立新的 SvelteKit 專案時，系統會詢問您是否要設定Vitest 進行單元測試。還有許多其他測試執行器也可以使用。

元件測試：驗證 Svelte 元件是否在其整個生命週期中按照預期安裝和互動，需要一個提供文件物件模型 (DOM) 的工具。可以編譯元件（因為 Svelte 是一個編譯器而不是一個普通的函式庫）並安裝，以允許斷言元素結構、偵聽器、狀態和 Svelte 元件提供的所有其他功能。元件測試的工具範圍從 jsdom 之類的記憶體內實作與 Vitest 之類的測試執行器配對，到利用實際瀏覽器提供視覺測試功能（例如 Playwright 或 Cypress）的解決方案。

端對端測試：為了確保您的使用者能夠與您的應用程式互動，必須盡可能以接近生產的方式對其進行整體測試。這是透過編寫端對端 (E2E) 測試來完成的，這些測試會載入已部署版本的應用程式並與之互動，以模擬使用者將如何與您的應用程式互動。在建立新的 SvelteKit 專案時，系統會詢問您是否要設定 Playwright 進行端對端測試。還有許多其他 E2E 測試函式庫可供使用。

一些開始測試的資源

• Svelte 測試函式庫
• Cypress 中的 Svelte 元件測試
• 使用 vitest 的範例
• 使用 JSDOM 的 uvu 測試執行器範例
• 使用 Vitest 和 Playwright 測試 Svelte 元件
• 使用 WebdriverIO 進行元件測試

是否有路由器？

官方的路由函式庫是 SvelteKit。SvelteKit 在一個易於使用的套件中提供了檔案系統路由器、伺服器端渲染 (SSR) 和熱模組重載 (HMR)。它與 React 的 Next.js 有相似之處。

但是，您可以使用任何路由函式庫。很多人使用 page.js。還有一個很相似的 navaid。以及 universal-router，它是具有子路由的同構路由，但沒有內建歷史記錄支援。

如果您偏好宣告式 HTML 方法，則有同構的 svelte-routing 函式庫及其名為 svelte-navigator 的分支，其中包含一些額外功能。

如果您需要在用戶端上使用基於雜湊的路由，請查看 svelte-spa-router 或 abstract-state-router。

Routify 是另一個基於檔案系統的路由器，與 SvelteKit 的路由器類似。第 3 版支援 Svelte 的原生 SSR。

您可以在 sveltesociety.dev 上看到社群維護的路由器清單。

我可以告訴 Svelte 不要移除我未使用的樣式嗎？

否。Svelte 會從元件中移除樣式並警告您有關它們，以防止否則會出現的問題。

Svelte 的元件樣式作用域透過產生一個特定於給定元件的類別來工作，將其新增至 Svelte 控制下元件中的相關元素，然後將其新增至該元件樣式中的每個選取器。當編譯器看不到樣式選取器套用至哪些元素時，有兩個保留它的不良選項

• 如果它保留選取器並將作用域類別新增至其中，則選取器很可能與元件中預期的元素不符，如果它們是由子元件或 {@html ...} 建立的，則它們肯定不會匹配。
• 如果它保留選取器而不將作用域類別新增至其中，則給定的樣式將成為全域樣式，影響您的整個頁面。

如果您需要為 Svelte 無法在編譯時識別的內容設定樣式，您將需要使用 :global(...) 明確選擇加入全域樣式。但也要記住，您只能將 :global(...) 包裹在選取器的部分周圍。.foo :global(.bar) { ... } 將為出現在元件的 .foo 元素內的任何 .bar 元素設定樣式。只要目前元件中有一些父元素可以開始，像這樣的部分全域選取器幾乎總是能夠讓您獲得想要的東西。

Svelte v2 仍然可用嗎？

不會再向其中新增新功能，並且只有在它們非常糟糕或存在某種安全漏洞時，才會修復錯誤。

該文件仍然可以在此處取得。

如何進行熱模組重載？

我們建議使用 SvelteKit，它開箱即用就支援 HMR，並且是建立在 Vite 和 svelte-hmr 之上。此外，也有社群提供的 rollup 和 webpack 的外掛。