Svelte是一個由Rich Harris建立的開放原始碼前端編譯器[4],由志願者維護。[5]與傳統框架(如ReactVue)在瀏覽器中進行大量處理的方式不同,Svelte將這些工作提前到編譯階段處理。[6]構建一個Svelte應用程式會生成操作文件物件模型(DOM)的代碼,Svelte藉此可以減少傳輸的檔案的大小,並提供更好的啟動和執行時效能。Svelte有由TypeScript編寫的編譯器[4],用於在構建時將應用代碼轉換為客戶端的JavaScript

Svelte
原作者Rich Harris
首次發布2016年11月26日,​7年前​(2016-11-26[1]
目前版本5.0.0[2]在維基數據編輯
原始碼庫github.com/sveltejs/svelte
程式語言TypeScript
檔案大小4.1 KB[3]
類型Web應用框架
許可協定MIT License
網站svelte.dev

Svelte的原始碼採用MIT許可證,代管在GitHub上。[7]

2023年6月,Svelte 4發布,軟體套件大小減小了75%,生成更小、更快的脫水代碼,並為Svelte 5的更新打下了基礎。[8]

範例

編輯

Svelte應用和組件由 .svelte 檔案定義。這是一種添加了類似於JSX的模板語法的HTML檔案。Svelte使用 $: 語法來標記響應式的組件。頂層的變數是組件的狀態,匯出的變數成為組件接收的屬性。

<script>
    let count = 1;
    $: doubled = count * 2;
</script>

<p>{count} * 2 = {doubled}</p>

<button on:click={() => count = count + 1}>Count</button>

參考資料

編輯
  1. ^ Frameworks without the framework: why didn't we think of this sooner?. Svelte. [2023-03-18]. (原始內容存檔於2023-03-27). 
  2. ^ https://github.com/sveltejs/svelte/releases/tag/svelte%405.0.0; 檢索日期: 2024年10月23日.
  3. ^ Svelte@3.31.2. BundlePhobia. January 8, 2021 [2023-03-18]. (原始內容存檔於2021-05-14). 
  4. ^ 4.0 4.1 Svelte入門 - 學習該如何開發 Web | MDN. developer.mozilla.org. [2021-08-21]. (原始內容存檔於2022-03-26) (中文(臺灣)). 
  5. ^ Svelte • Cybernetically enhanced web apps. svelte.dev. [2021-08-21]. (原始內容存檔於2022-05-09) (英語). 
  6. ^ Apr 22 2019, Rich Harris Mon. Svelte 3: Rethinking reactivity. svelte.dev. [2021-08-21]. (原始內容存檔於2022-04-26) (英語). 
  7. ^ GitHub - sveltejs/svelte: Cybernetically enhanced web apps. GitHub. [2021-08-21]. (原始內容存檔於2022-05-03) (英語). 
  8. ^ Krill, Paul. Svelte 4 shrinks code footprint, compiled output. InfoWorld. 2023-06-26 [2023-06-27]. (原始內容存檔於2023-06-29) (英語).