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 可以擴充套件 HTML、CSS 和 JavaScript，生成最佳的 JavaScript 程式碼，而沒有任何執行時開銷。為了實現這一點，Svelte 以以下方式擴充套件了原生 Web 技術

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

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

由於 Svelte 是一個編譯器，因此您不能只是在頁面中新增一個 <script src="svelte.js"> 標籤，然後將其匯入您的應用程式。您必須設定您的開發環境才能讓編譯器完成其工作。

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

如果您使用的是 Windows，則需要安裝一些軟體才能為您提供與 Unix/macOS 終端等效的功能，以便使用本教程中提到的終端命令。Gitbash（作為 git for Windows 工具集 的一部分提供）或 Windows 子系統 for Linux (WSL) 都很適合。有關這些內容以及一般終端命令的更多資訊，請參閱 命令列速成課程。

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

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

建立入門應用程式模板的最簡單方法是隻需下載入門模板應用程式。您可以透過訪問 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：這是節點儲存專案依賴項的地方。這些依賴項不會發送到生產環境，它們僅用於開發目的。
• .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 頁面的主體。
• 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 應用程式的構建塊。它們使用 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 (min-width: 640px) {
    main {
      max-width: none;
    }
  }
</style>

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

<script>
  export let name;
</script>

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

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

<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} 這樣的標籤——這些示例允許你分別有條件地渲染標記的一部分、迭代元素列表和處理非同步值。

如果你有使用 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 (min-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 上的應用程式就會自動更新。

在 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 事件。

讓我們開啟 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，以及 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。

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 帳戶登入，你還可以 fork 和儲存應用程式。你還可以透過單擊你的 GitHub 使用者名稱資料並選擇你儲存的應用程式來檢視所有已儲存的 REPL。

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

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

使用以下命令克隆 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 與我們一起編碼，請從以下位置開始

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

這使我們結束了對 Svelte 的初步瞭解，包括如何在本地安裝它、建立啟動應用程式以及基礎知識的工作原理。在下一篇文章中，我們將開始構建第一個正式應用程式，一個待辦事項列表。但是，在我們開始之前，讓我們回顧一下我們學到的一些內容。

在 Svelte 中

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

• 上一篇
• 概述：理解客戶端 JavaScript 框架
• 下一篇