常見問題

在 GitHub 上編輯此頁面

我是 Svelte 新手。我應該從何開始？永久連結

我們認為開始的最佳方式是透過互動式教學課程進行遊戲。那裡的每個步驟主要著重於一個特定面向，而且容易遵循。你將會直接在瀏覽器中編輯和執行真正的 Svelte 元件。

五到十分鐘的時間應該足以讓你上手。一個半小時的時間應該可以讓你完成整個教學課程。

我可以在哪裡獲得支援？永久連結

如果你的問題與特定語法有關，API 頁面是開始的好地方。

Stack Overflow 是詢問程式碼層級問題或當你遇到特定錯誤時受困的熱門論壇。閱讀標記為Svelte的現有問題，或詢問你自己的問題！

有線上論壇和聊天室非常適合討論最佳實務、應用程式架構，或只是認識其他 Svelte 使用者。我們的 Discord 或Reddit 頻道就是這種地方的範例。如果你有可回答的程式碼層級問題，Stack Overflow 通常比較適合。

是否有任何第三方資源？永久連結

Svelte Society 維護一份書籍和影片清單。

我如何讓 VS Code 對我的 .svelte 檔案進行語法突顯？永久連結

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

是否有自動格式化我的 .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>

注意：描述元件的 HTML 註解中需要有 @component。

Svelte 可否擴充套件？永久連結

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

是否有 UI 元件庫？永久連結

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

我如何測試 Svelte 應用程式？永久連結

應用程式的結構方式和定義邏輯的位置將決定確保適當測試的最佳方式。請務必注意，並非所有邏輯都屬於元件中 - 這包括資料轉換、跨元件狀態管理和記錄等問題。請記住，Svelte 庫有自己的測試套件，因此您不需要撰寫測試來驗證 Svelte 提供的實作詳細資料。

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

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

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

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

一些開始測試的資源

• Svelte 測試函式庫
• 在 Cypress 中進行 Svelte 元件測試
• 使用 vitest 的範例
• 使用 uvu 測試執行器與 JSDOM 的範例
• 使用 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 的社群外掛程式。