Svelte 入門

Svelte：構建豐富使用者介面的新方法

Svelte 提供了與本模組中介紹的其他一些框架不同的構建 Web 應用程式的方法。像 React 和 Vue 這樣的框架在應用程式執行時主要在使用者的瀏覽器中完成工作，而 Svelte 將這項工作轉移到編譯步驟中，該步驟僅在你構建應用程式時發生，從而生成高度最佳化的純 JavaScript。

這種方法的結果不僅是更小的應用程式包和更好的效能，而且還為那些對現代工具生態系統經驗有限的人提供了更容易上手的開發體驗。

Svelte 緊密遵循 HTML、CSS 和 JS 的經典 Web 開發模型，只是對 HTML 和 JavaScript 添加了一些擴充套件。它可以說比其他一些框架選項需要學習的概念和工具更少。

它目前的主要缺點是它是一個年輕的框架——因此，與更成熟的框架相比，它的生態系統在工具、支援、外掛、明確的使用模式等方面更加有限，而且就業機會也更少。但它的優點應該足以讓你有興趣去探索它。

我們鼓勵你先透過 Svelte 教程 快速瞭解基本概念，然後再回到本系列教程學習如何構建更深入的內容。

用例

Svelte 可以用於開發介面的小部分或整個應用程式。你可以從頭開始，讓 Svelte 驅動你的 UI，也可以將其增量整合到現有應用程式中。

儘管如此，Svelte 特別適合處理以下情況：

• 適用於低功耗裝置的 Web 應用程式：使用 Svelte 構建的應用程式具有更小的捆綁包大小，這對於網路連線慢且處理能力有限的裝置來說是理想選擇。更少的程式碼意味著更少的 KB 下載、解析、執行和駐留在記憶體中。
• 高度互動的頁面或複雜的視覺化：如果你正在構建需要顯示大量 DOM 元素的資料視覺化，那麼來自沒有執行時開銷的框架的效能提升將確保使用者互動快速響應。
• 為具有基本 Web 開發知識的人員提供入門：Svelte 的學習曲線平緩。具有基本 HTML、CSS 和 JavaScript 知識的 Web 開發人員可以在短時間內輕鬆掌握 Svelte 的具體內容並開始構建 Web 應用程式。

Svelte 團隊推出了 SvelteKit，這是一個使用 Svelte 構建 Web 應用程式的框架。它包含現代 Web 框架中的功能，例如基於檔案系統的路由、伺服器端渲染 (SSR)、特定頁面渲染模式、離線支援等。有關 SvelteKit 的更多資訊，請參閱 官方教程 和 文件。

Svelte 也透過 Svelte Native 可用於移動開發。

Svelte 如何工作？

作為一個編譯器，Svelte 可以擴充套件 HTML、CSS 和 JavaScript，生成最佳化的 JavaScript 程式碼，而沒有任何執行時開銷。為了實現這一點，Svelte 透過以下方式擴充套件了純粹的 Web 技術：

• 它透過允許在標記中包含 JavaScript 表示式並提供使用條件和迴圈的指令來擴充套件 HTML，其方式類似於 handlebars。
• 它透過新增作用域機制來擴充套件 CSS，允許每個元件定義自己的樣式，而不會與其它元件的樣式發生衝突。
• 它透過重新解釋語言的特定指令來擴充套件 JavaScript，以實現真正的響應性並簡化元件狀態管理。

編譯器僅在非常特定的情況和 Svelte 元件的上下文中進行干預。對 JavaScript 語言的擴充套件是最小的，並且經過仔細挑選，以免破壞 JavaScript 語法或疏遠開發人員。實際上，你將主要使用純 JavaScript。

Svelte 初步

由於 Svelte 是一個編譯器，你不能只是在頁面中新增一個 <script src="svelte.js"> 標籤並將其匯入到你的應用程式中。你需要設定你的開發環境，以便編譯器完成它的工作。

依賴項

為了使用 Svelte，你需要安裝 Node.js。建議你使用長期支援 (LTS) 版本。Node 包含 npm（Node 包管理器）和 npx（Node 包執行器）。請注意，你也可以使用 Yarn 包管理器代替 npm，但在本系列教程中，我們假設你使用的是 npm。有關 npm 和 yarn 的更多資訊，請參閱 包管理基礎知識。

如果你使用的是 Windows，你需要安裝一些軟體，以使你的終端與 Unix/macOS 終端具有同等功能，以便使用本教程中提到的終端命令。Git Bash（作為 Windows 版 Git 工具集 的一部分）或 適用於 Linux 的 Windows 子系統 (WSL) 都適用。有關這些以及一般終端命令的更多資訊，請參閱 命令列速成課程。

另請參閱以下內容以獲取更多資訊：

• “關於 npm” 在 npm 文件中
• “介紹 npx” 在 npm 部落格上

建立你的第一個 Svelte 應用

建立入門應用模板最簡單的方法是直接下載入門模板應用程式。你可以透過訪問 GitHub 上的 sveltejs/template 來完成此操作，或者你可以避免下載和解壓，只需使用 degit。

要建立你的入門應用程式模板，請執行以下終端命令：

npx degit sveltejs/template moz-todo-svelte
cd moz-todo-svelte
npm install
npm run dev

執行 npm run dev 後，Svelte 將編譯並構建你的應用程式。它將在 localhost:8080 啟動一個本地伺服器。Svelte 將監視檔案更新，並在原始碼發生更改時自動重新編譯和重新整理應用程式。你的瀏覽器將顯示如下內容：

應用程式結構

入門模板具有以下結構：

moz-todo-svelte
├── README.md
├── package.json
├── package-lock.json
├── rollup.config.js
├── .gitignore
├── node_modules
├── public
│   ├── favicon.png
│   ├── index.html
│   ├── global.css
│   └── build
│       ├── bundle.css
│       ├── bundle.js
│       └── bundle.js.map
├── scripts
│   └── setupTypeScript.js
└── src
    ├── App.svelte
    └── main.js

內容如下：

• package.json 和 package-lock.json：包含 Node.js/npm 用於組織專案的資訊。你無需完全理解此檔案即可完成本教程，但是，如果你想了解更多資訊，可以閱讀 npmjs.com 上關於 package.json 處理 的內容；我們還在 包管理基礎教程 中討論過它。

• node_modules：這是 Node 儲存專案依賴項的地方。這些依賴項不會發送到生產環境，它們僅用於開發目的。

• .gitignore：告訴 Git 要從專案中忽略哪些檔案或資料夾——如果你決定將應用程式包含在 Git 倉庫中，這很有用。

• rollup.config.js：Svelte 使用 rollup.js 作為模組打包器。此配置檔案告訴 rollup 如何編譯和構建你的應用程式。如果你更喜歡 webpack，你可以改為使用 npx degit sveltejs/template-webpack svelte-app 建立你的入門專案。

• scripts：包含所需的設定指令碼。目前應該只包含 setupTypeScript.js。

  • setupTypeScript.js：此指令碼在 Svelte 中設定 TypeScript 支援。我們將在最後一篇文章中詳細討論這一點。

• src：此目錄是應用程式原始碼所在的位置——你將在其中建立應用程式程式碼。

  • App.svelte：這是應用程式的頂級元件。到目前為止，它只渲染“Hello World!”訊息。
  • main.js：我們應用程式的入口點。它只是例項化 App 元件並將其繫結到我們 HTML 頁面的 body 中。

• public：此目錄包含將在生產中釋出的所有檔案。

  • favicon.png：這是你應用程式的 favicon。目前是 Svelte 標誌。
  • index.html：這是你應用程式的主頁。最初它只是一個空的 HTML 頁面，載入 Svelte 生成的 CSS 檔案和 JS 包。
  • global.css：此檔案包含未作用域的樣式。它是一個常規的 CSS 檔案，將應用於整個應用程式。
  • build：此資料夾包含生成的 CSS 和 JavaScript 原始碼。
    • bundle.css：Svelte 從為每個元件定義的樣式生成的 CSS 檔案。
    • bundle.js：從你的所有 JavaScript 原始碼編譯而來的 JavaScript 檔案。

檢視我們的第一個 Svelte 元件

元件是 Svelte 應用程式的構建塊。它們使用 HTML 的超集寫入 .svelte 檔案中。

所有這三個部分——<script>、<style> 和標記——都是可選的，並且可以以你喜歡的任何順序出現。

<script>
  // logic goes here
</script>

<style>
  /* styles go here */
</style>

<!-- markup (zero or more HTML elements) goes here -->

考慮到這一點，讓我們看看隨入門模板提供的 src/App.svelte 檔案。你應該會看到類似以下內容：

<script>
  export let name;
</script>

<main>
  <h1>Hello {name}!</h1>
  <p>
    Visit the <a href="https://learn.svelte.dev/">Svelte tutorial</a> to learn
    how to build Svelte apps.
  </p>
</main>

<style>
  main {
    text-align: center;
    padding: 1em;
    max-width: 240px;
    margin: 0 auto;
  }

  h1 {
    color: #ff3e00;
    text-transform: uppercase;
    font-size: 4em;
    font-weight: 100;
  }

  @media (width >= 640px) {
    main {
      max-width: none;
    }
  }
</style>

<script> 部分

<script> 塊包含在元件例項建立時執行的 JavaScript。在頂級宣告（或匯入）的變數在元件的標記中是“可見”的。頂級變數是 Svelte 處理元件狀態的方式，它們預設是響應式的。我們將在後面詳細解釋這意味著什麼。

<script>
  export let name;
</script>

Svelte 使用 export 關鍵字將變數宣告標記為屬性（或 prop），這意味著它對元件的消費者（例如，其他元件）變得可訪問。這是 Svelte 擴充套件 JavaScript 語法以使其更有用，同時保持其熟悉性的一個示例。

標記部分

在標記部分，你可以插入任何你喜歡的 HTML，此外，你可以在單個大括號 ({}) 中插入有效的 JavaScript 表示式。在這種情況下，我們將 name 屬性的值嵌入到 Hello 文字之後。

<main>
  <h1>Hello {name}!</h1>
  <p>
    Visit the <a href="https://learn.svelte.dev/">Svelte tutorial</a> to learn
    how to build Svelte apps.
  </p>
</main>

Svelte 還支援 {#if}、{#each} 和 {#await} 等標籤——這些示例允許你分別有條件地渲染部分標記、遍歷元素列表以及處理非同步值。

<style> 部分

如果你有使用 CSS 的經驗，以下程式碼片段應該很容易理解：

<style>
  main {
    text-align: center;
    padding: 1em;
    max-width: 240px;
    margin: 0 auto;
  }

  h1 {
    color: #ff3e00;
    text-transform: uppercase;
    font-size: 4em;
    font-weight: 100;
  }

  @media (width >= 640px) {
    main {
      max-width: none;
    }
  }
</style>

我們正在對 <h1> 元素應用樣式。那麼其他包含 <h1> 元素的元件會發生什麼呢？

在 Svelte 中，元件 <style> 塊內的 CSS 只會作用於該元件。這是透過向選定元素新增一個基於元件樣式雜湊的類來實現的。

你可以透過在新瀏覽器標籤頁中開啟 localhost:8080，右鍵/Ctrl-點選 HELLO WORLD! 標籤，然後選擇 檢查 來看到這一點。

在編譯應用程式時，Svelte 將我們的 h1 樣式定義更改為 h1.svelte-1tky8bj，然後將元件中的每個 <h1> 元素修改為 <h1 class="svelte-1tky8bj">，以便它按要求應用樣式。

進行一些更改

現在我們對它們如何協同工作有了一個大致的瞭解，我們可以開始進行一些更改了。此時你可以嘗試更新你的 App.svelte 元件——例如，更改 App.svelte 中的 <h1> 元素，使其內容如下：

<h1>Hello {name} from MDN!</h1>

只需儲存你的更改，在 localhost:8080 執行的應用程式將自動更新。

Svelte 響應性的初探

在 UI 框架的背景下，響應性意味著當任何元件的狀態發生變化時，框架可以自動更新 DOM。

在 Svelte 中，響應性是透過為元件中的任何頂級變數賦值新值來觸發的。例如，我們可以在 App 元件中包含一個 toggleName() 函式和一個按鈕來執行它。

嘗試像這樣更新你的 <script> 和標記部分：

<script>
  export let name;

  function toggleName() {
    if (name === "world") {
      name = "Svelte";
    } else {
      name = "world";
    }
  }
</script>

<main>
  <h1>Hello {name}!</h1>
  <button on:click="{toggleName}">Toggle name</button>
  <p>
    Visit the <a href="https://learn.svelte.dev/">Svelte tutorial</a> to learn
    how to build Svelte apps.
  </p>
</main>

每當點選按鈕時，Svelte 就會執行 toggleName() 函式，這反過來又會更新 name 變數的值。

如你所見，<h1> 標籤會自動更新。在幕後，Svelte 建立了 JavaScript 程式碼，以便在 name 變數的值發生變化時更新 DOM，而無需使用任何虛擬 DOM 或其他複雜的協調機制。

請注意 on:click 中 : 的用法。這是 Svelte 監聽 DOM 事件的語法。

檢查 main.js：我們應用程式的入口點

讓我們開啟 src/main.js，這是 App 元件被匯入和使用的地方。這個檔案是我們應用程式的入口點，它最初看起來是這樣的：

import App from "./App.svelte";

const app = new App({
  target: document.body,
  props: {
    name: "world",
  },
});

export default app;

main.js 首先匯入我們將要使用的 Svelte 元件。然後它透過 new App 進行例項化，並傳入一個包含以下屬性的選項物件：

• target：我們希望元件渲染到其中的 DOM 元素，在本例中是 <body> 元素。
• props：要分配給 App 元件每個屬性的值。

深入瞭解其內部工作原理

Svelte 如何使所有這些檔案協同工作？

Svelte 編譯器處理每個元件的 <style> 部分，並將它們編譯到 public/build/bundle.css 檔案中。

它還編譯每個元件的標記和 <script> 部分，並將結果儲存在 public/build/bundle.js 中。它還在 src/main.js 中新增程式碼以引用每個元件的功能。

最後，public/index.html 檔案包含生成的 bundle.css 和 bundle.js 檔案。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />

    <title>Svelte app</title>

    <link rel="icon" type="image/png" href="/favicon.png" />
    <link rel="stylesheet" href="/global.css" />
    <link rel="stylesheet" href="/build/bundle.css" />

    <script defer src="/build/bundle.js"></script>
  </head>

  <body></body>
</html>

bundle.js 的壓縮版只有略多於 3KB，其中包括“Svelte 執行時”（僅 300 行 JavaScript 程式碼）和 App.svelte 編譯元件。如你所見，bundle.js 是 index.html 唯一引用的 JavaScript 檔案。網頁中沒有載入其他庫。

這比其他框架的編譯包要小得多。請注意，在程式碼包的情況下，重要的不僅僅是你必須下載的檔案大小。這是需要解析、執行並儲存在記憶體中的可執行程式碼。因此，這確實會產生影響，尤其是在低功耗裝置或 CPU 密集型應用程式中。

跟隨本教程

在本系列教程中，你將構建一個完整的 Web 應用程式。我們將學習 Svelte 的所有基礎知識以及許多高階主題。

你可以只閱讀內容以更好地理解 Svelte 的功能，但如果你能邊學邊跟著我們一起編寫應用程式程式碼，你將從本教程中獲得最大的收益。為了讓你更輕鬆地閱讀每篇文章，我們提供了一個 GitHub 倉庫，其中包含一個資料夾，其中包含每篇文章開頭應用程式的原始碼。

Svelte 還提供了一個線上 REPL，這是一個用於在網路上即時編寫 Svelte 應用程式的平臺，無需在你的機器上安裝任何東西。我們為每篇文章提供了一個 REPL，這樣你就可以立即開始編碼。讓我們更詳細地談談如何使用這些工具。

使用 Git

最流行的版本控制系統是 Git，以及 GitHub，一個為你的倉庫提供託管和多個工具來處理它們的網站。

我們將使用 GitHub，這樣你就可以輕鬆下載每篇文章的原始碼。你還可以獲取完成文章後的程式碼，以防你迷路。

安裝 git 後，要克隆倉庫，你應該執行：

git clone https://github.com/opensas/mdn-svelte-tutorial.git

然後，在每篇文章的開頭，你只需 cd 進入相應的資料夾並以開發模式啟動應用程式，以檢視其當前狀態應該是什麼樣，例如：

cd 02-starting-our-todo-app
npm install
npm run dev

如果你想了解更多關於 git 和 GitHub 的資訊，我們整理了一份有用指南的連結列表——請參閱 Git 和 GitHub。

使用 Svelte REPL

REPL (讀取-求值-列印迴圈) 是一個互動式環境，允許你輸入命令並立即檢視結果——許多程式語言都提供了 REPL。

Svelte 的 REPL 不止於此。它是一個線上工具，允許你建立完整的應用程式，線上儲存它們，並與他人分享。

這是從任何機器開始使用 Svelte 的最簡單方法，無需安裝任何東西。它也受到 Svelte 社群的廣泛使用。如果你想分享一個想法、尋求幫助或報告問題，建立一個演示問題的 REPL 例項總是非常有用的。

讓我們快速瞭解一下 Svelte REPL 以及如何使用它。它看起來像這樣：

要啟動 REPL，請開啟瀏覽器並導航到 https://svelte.dev/repl。

• 螢幕左側是元件程式碼，右側是應用程式執行輸出。

• 程式碼上方的欄允許你建立 .svelte 和 .js 檔案並重新排列它們。要在資料夾中建立檔案，只需指定完整的路徑名，如下所示：components/MyComponent.svelte。資料夾將自動建立。

• 該欄上方是 REPL 的標題。點選它進行編輯。

• 右側有三個選項卡：

  • “結果”選項卡顯示應用程式輸出，並在底部提供了一個控制檯。
  • “JS 輸出”選項卡允許你檢查 Svelte 生成的 JavaScript 程式碼並設定編譯器選項。
  • “CSS 輸出”選項卡顯示 Svelte 生成的 CSS。

• 在選項卡上方，你會找到一個工具欄，允許你進入全屏模式和下載你的應用程式。如果你使用 GitHub 帳戶登入，你還可以克隆並儲存應用程式。你還可以透過點選你的 GitHub 使用者名稱個人資料並選擇“你儲存的應用程式”來檢視所有已儲存的 REPL。

每當你在 REPL 上更改任何檔案時，Svelte 都會重新編譯應用程式並更新“結果”選項卡。要分享你的應用程式，請分享 URL。例如，這是執行我們完整應用程式的 REPL 連結：https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2。

我們將在每篇文章的開頭和結尾提供一個 REPL，以便你可以立即開始與我們一起編寫程式碼。

目前的全部程式碼

Git

使用以下命令克隆 GitHub 倉庫（如果您尚未這樣做）

git clone https://github.com/opensas/mdn-svelte-tutorial.git

然後執行以下命令以獲取當前應用程式狀態

cd mdn-svelte-tutorial/01-getting-started

或者直接下載資料夾內容

npx degit opensas/mdn-svelte-tutorial/01-getting-started

請記住執行 npm install && npm run dev 以開發模式啟動您的應用程式。

REPL

要使用 REPL 與我們一起編碼，請從以下地址開始

https://svelte.dev/repl/fc68b4f059d34b9c84fa042d1cce586c?version=3.23.2

總結

至此，我們對 Svelte 的初步瞭解，包括如何本地安裝、建立入門應用程式以及基本工作原理。在下一篇文章中，我們將開始構建我們的第一個實際應用程式——一個待辦事項列表。但在那之前，讓我們回顧一下我們所學到的一些內容。

在 Svelte 中

• 我們將每個元件的指令碼、樣式和標記定義在一個單獨的 .svelte 檔案中。
• 元件屬性使用 export 關鍵字宣告。
• Svelte 元件只需匯入相應的 .svelte 檔案即可使用。
• 元件樣式是作用域的，以防止它們相互衝突。
• 在標記部分，你可以將任何 JavaScript 表示式放在大括號之間。
• 元件的頂級變數構成其狀態。
• 透過為頂級變數賦值新值即可觸發響應性。

• 概述：JavaScript 框架和庫
• 下一頁