Svelte 簡介及安裝

---

Svelte 是一種建立 Web 應用程式的新方法，它可以用於從程式碼的一小部分到完整的網頁應用程式。Svelte 不是框架，而是一個編譯器，它比其他 JavaScript 庫（如 AngularJS、Vue.js 和 ReactJS）快得多。Svelte 的主要目的是建立響應式 Web 應用程式，並提供這樣的功能：如果資料發生任何更改，它將迅速反映在頁面上，並且不會花費太多時間。

Svelte 簡介

正如我們在開篇段落中所看到的，Svelte 是一種建立 Web 應用程式的新方法，它可以用於從程式碼的一小部分到完整的網頁應用程式，這使得它易於用於快速應用開發 (RAD)。RAD 意味著快速生成小型程式碼應用程式用於軟體並在 Web 最佳化中使用。Svelte 與其他技術的主要區別在於它不使用虛擬 DOM，並且它是免費使用的。

Svelte 在執行時將用於生產的程式碼編譯成普通的 JavaScript 包。與其他庫不同，使用者無需透過網際網路部署 Svelte 來透過網際網路部署他們的應用程式。所有這些都使得在使用 Svelte 時可以快速執行。

前提條件

在使用者在本地機器上使用 Svelte 之前，系統或計算機中需要存在某些技術。這些前提條件是：

• 文字編輯器，例如 Atom、Sublime Text 3 等。

• 在本地電腦上安裝 Node.js，因為 Node.js 是執行 Svelte 的基石。

Svelte 的安裝

獲得前提條件後，我們現在準備安裝 Svelte。我們將逐步進行，以便更好地理解：

步驟 1 - 在命令提示符或終端中鍵入以下命令：

npm install -g degit 

Degit 是一個允許使用者簡單地從 GitHub 倉庫克隆先前提交的包。

步驟 2 - 下一步是在本地電腦上建立一個新目錄，然後執行以下命令：

degit sveltejs/template project_name 

透過此命令，degit 將轉到 sveltejs（倉庫）並找到模板，以便將其下載到使用者本地電腦上的名為 project_name 的專案中。

步驟 3 - 現在我們已經完成了基礎步驟，下一步是在我們的文字編輯器中，在 project_name 資料夾下，我們有 src 資料夾，其中包含 main.js 檔案，此檔案主要用於執行使用者的 Svelte 應用程式。這裡還有另外兩個檔案，分別是 App.svelte 和 package.json。package.json 檔案包含需要安裝的所有依賴項，另一個檔案 App.svelte 是應用程式的根元件。

步驟 4 - 在此步驟中，使用者必須安裝所有依賴項，需要注意的是，要在當前專案（即 project_name 資料夾）中安裝所有依賴項。

npm install 

在終端中執行上述命令。

透過所有這些命令，使用者就可以啟動基於 Svelte 的應用程式。

Svelte 的用途

Svelte 可用於構建獨立程式和特定的介面元件。使用 Svelte，您可以從頭開始建立 UI，也可以將其逐步整合到現有應用程式中。

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

• 使用 Svelte 構建的應用程式具有更小的包大小，因此非常適合網路連線緩慢和處理能力較低的裝置。適用於低功耗硬體的 Web 應用。較少的程式碼意味著需要下載、解析和執行的記憶體密集型 KB 較少。

• 高度互動式的網站或複雜的視覺化：如果您正在建立需要顯示大量 DOM 元素的資料視覺化，則來自執行時開銷較小的框架的效能提升將確保使用者互動快速且響應迅速。

• 由於學習曲線較快，即使沒有 Web 開發經驗的使用者也可以輕鬆上手 Svelte。擁有 HTML、CSS 和 JavaScript 基礎知識的 Web 開發人員可以輕鬆理解 Svelte 的複雜性。

Svelte 的基本工作原理

由於 Svelte 是一個編譯器，它可以擴充套件 HTML、CSS 和 JavaScript，並生成沒有執行時成本的最佳 JavaScript 程式碼。為此，Svelte 以以下方式擴充套件了現有 Web 技術：

• 它透過允許在標記中使用 JavaScript 表示式並提供使用類似於 handlebars 的樣式在條件和迴圈中使用指令來擴充套件 HTML。

• 它透過提供作用域機制來擴充套件 CSS，並使每個元件能夠表達自己的樣式，而無需擔心它們與其他元件的樣式衝突。

• 它透過重新解釋該語言的一些指令來擴充套件 JavaScript，以便實現真正的響應能力並簡化元件狀態管理。

編譯器僅在涉及 Svelte 元件且僅在非常具體的情況下才會介入。對 JavaScript 語言的擴充套件被控制在最小限度，並經過仔細選擇，以避免破壞 JavaScript 語法或疏遠開發人員。實際上，大多數時候您將使用普通的 JavaScript。

應用程式結構

首先，我們將獲得 moz-todo-svelte 檔案，其中將包含：

• README.md、package.json、package-lock.json、rollup、.config.js、.gitignore、node_modules、public。

• public 將進一步包含：

• favicon.png、index.html、global.css、build、bundle.css、bundle.js、bundle.js.map

• scripts，這將進一步包含 setupTypeScript.js

• src，其中將包含 App.svelte 和 main.js

結論

在本教程中，我們學習了 Svelte 的簡介和安裝。Svelte 是一種建立 Web 應用程式的新方法，它可以用於從程式碼的一小部分到完整的網頁應用程式。Svelte 不是框架，而是一個編譯器，它比其他 JavaScript 庫（如 AngularJS、Vue.js 和 ReactJS）快得多。Svelte 在執行時將用於生產的程式碼編譯成普通的 JavaScript 包。