給新開發者的 Svelte

這份簡短的指南旨在幫助您 —— 一個已經看過教學並想開始創建 Svelte 應用程式，但沒有太多使用 JavaScript 建構工具經驗的人 —— 開始順利運行。

如果有些東西讓您感到不明白，或是我們草率帶過，請隨時提出問題或建議修改此頁面，這將有助於我們幫助更多人。

如果您在遵循本指南的任何時候遇到困難，尋求幫助的最佳地點是聊天室。

首先

您將使用命令列，也稱為終端機。在 Windows 上，您可以從「開始」選單執行 命令提示字元 來存取；在 Mac 上，同時按下 Cmd 和 Space 鍵以開啟 Spotlight，然後開始輸入 Terminal.app。在大多數 Linux 系統上，Ctrl-Alt-T 會開啟命令列。

命令列是一種與電腦（或其他電腦！但這是另一個話題）互動的方式，它比大多數人每天使用的 GUI（圖形使用者介面）具有更強大的功能和控制能力。

一旦進入命令列，您可以使用 ls（Windows 上為 dir）來列出目前目錄的內容，並使用 cd 來變更目前目錄，以此來瀏覽檔案系統。例如，如果您的家目錄中有一個 Development 目錄來存放您的專案，您會輸入

cd Development

來前往該目錄。從那裡，您可以使用 mkdir 命令建立一個新的專案目錄

mkdir svelte-projects
cd svelte-projects

命令列的完整介紹超出了本指南的範圍，但這裡有一些更有用的命令

• cd .. — 導覽至目前目錄的父目錄
• cat my-file.txt — 在 Mac/Linux 上（Windows 上為 type my-file.txt），列出 my-file.txt 的內容
• open . (或 Windows 上為 start .) — 在 Finder 或檔案總管中開啟目前目錄

安裝 Node.js

Node 是一種在命令列上執行 JavaScript 的方式。它被許多工具使用，包括 Svelte。如果您尚未安裝，最簡單的方法是直接從網站下載最新版本。

安裝完成後，您將可以使用三個新的命令

• node my-file.js — 執行 my-file.js 中的 JavaScript
• npm [子命令] — npm 是一種安裝應用程式所依賴的「套件」的方式，例如 svelte 套件
• npx [子命令] — 一種方便的方式，可以在不永久安裝的情況下執行 npm 上提供的程式

安裝文字編輯器

要編寫程式碼，您需要一個好的編輯器。最受歡迎的選擇是 Visual Studio Code 或 VSCode，而且當之無愧 —— 它設計精良、功能齊全，並且有大量的擴充功能（包括一個用於 Svelte 的擴充功能，它會在您編寫元件時提供語法高亮和診斷訊息）。

建立專案

我們將使用 Svelte + Vite 範本。您不必使用專案範本，但這意味著您可以減少很多設定工作。

在命令列上，導覽至您要建立新專案的位置，然後輸入以下幾行（您可以貼上整行，但如果您養成一次寫一行然後執行的習慣，您將會發展出更好的肌肉記憶）

npm create vite@latest my-svelte-project -- --template svelte
cd my-svelte-project
npm install

如果您偏好 TypeScript，可以用 --template svelte-ts 取代 --template svelte。

這會建立一個新的目錄 my-svelte-project，從 create-vite/template-svelte 範本新增檔案，並從 npm 安裝一些套件。在您的文字編輯器中開啟該目錄並四處看看。應用程式的「原始碼」位於 src 目錄中，而您的應用程式可以載入的檔案則位於 public 中。

在 package.json 檔案中，有一個名為 "scripts" 的區段。這些指令碼定義了用於處理您的應用程式的捷徑 —— dev、build 和 preview。要在開發模式下啟動您的應用程式，請輸入以下內容

npm run dev

執行 dev 指令碼會啟動一個名為 Vite 的程式。Vite 的工作是取得您應用程式的原始檔，將它們傳遞給其他程式（在我們的例子中包括 Svelte），並將它們轉換為當您在瀏覽器中開啟應用程式時實際運行的程式碼。

說到這裡，請開啟瀏覽器並導覽至 https://127.0.0.1:5173。這是您的應用程式在 5173 連接埠上的本機網頁伺服器（因此稱為「localhost」）上執行。

嘗試變更 src/App.svelte 並儲存它。應用程式將會使用您的變更進行更新。

建置您的應用程式

在上一步中，我們在「開發模式」下執行應用程式。在開發模式下，Svelte 會新增額外的程式碼來協助除錯，而 Vite 會跳過壓縮您應用程式 JavaScript 的最後一步。

當您與全世界分享您的應用程式時，您會希望在「生產模式」下建置它，使其對終端使用者來說盡可能小且高效。若要執行此操作，請使用 build 命令

npm run build

您的 dist 目錄現在包含您應用程式的優化版本。您可以像這樣執行它

npm run preview