第 02 天：建立開發環境

就在這個時候貝克兒小姐說話了：「npm run dev！」這是我進來這麼久的一段時間裡，她說的第一句話。一切發生的如此突然，不要說我，連貝克兒小姐自己都嚇了一跳，她只好趕緊打了個呵欠當作掩飾，迅速起身進入了房間。

～節錄自《The Great Svelte：第一章》

第 02 天要講的事

1. 建立 Svelte 開發環境
2. 初始化 Svelte 新專案

　　由於 Svelte 是在開發階段利用編譯器來做出互動式的前端網頁，所以我們要先建立一個 Svelte 編譯器能夠運作的開發環境。今天就來介紹如何從頭開始開發一個 Svelte 新專案，踏出我們認識 Svelte 的第一步。

建立 Svelte 開發環境

　　Svelte 是衍生自 Javascript 的前端框架，所以第一件事是確保我們的電腦有安裝 Node.js，也就是能在伺服器端運行 Javascript 的執行環境。安裝 Node.js 很簡單，只要到官方網站，下載符合自己電腦系統的穩定運行版本 (long term support, LTS) 就行。以我來說，我的電腦系統是 Windows 64 位元版本，Node.js 偵測到系統，就自動推薦我安裝 18.17.1 LTS 的版本 (如圖一)。

圖一、Node.js 18.17.1 LTS for Windows (x64)

　　下載下來按照安裝精靈的指示完成安裝之後，到命令提示字元輸入 node --version，應該就會看到我們安裝好的版本號了。

> node --version
v18.17.1

　　有了 node.js 之後，就可以用 npm 指令來安裝需要的 Svelte 開發環境囉！
　　Svelte 官方網站會推薦使用 SvelteKit 當作 Svelte 的開發環境。SvelteKit 是基於 Svelte 這個架構，再往上進階處理路由、伺服端渲染 (serve-side-rendering, SSR)、以及許多為了達到效能最佳化而令人頭暈目眩的工作。但在這一個系列文裡，我想要單單仔細的介紹 Svelte 就好，所以這邊就不把 SvelteKit 也拉進來攪和，單純使用只有 Svelte 的開發環境。

• 首先在命令提示字元輸入 npm create vite@latest
• 輸入想要的專案名稱，例如我們可以輸入：the-great-svelte 當作專案名稱。
• 選擇 Svelte 作為專案的框架。
• 選擇 JavaScript 作為開發 Svelte 的方式，也就是純純的 Svelte，不摻一滴 SvelteKit。

> npm create vite@latest
? Project name: ... the-great-svelte
? Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
    Vue
    React
    Preact
    Lit
>   Svelte
    Solid
    Qwik
    Others
? Select a variant: » - Use arrow-keys. Return to submit.
    TypeScript
>   JavaScript
    SvelteKit ↗

　　如此一來就大功告成，這一系列指令會做出一個專案資料夾，以剛才的例子而言，就會是一個名為 the-great-svelte 的資料夾。最後只要將目錄切換到該資料夾，並且安裝好需要的模組即可：

> cd the-great-svelte
> npm install

　　試著輸入 npm run dev 來開啟 Svelte 給我們的樣板網頁吧：

> npm run dev

> svelte-template@0.0.0 dev
> vite

Forced re-optimization of dependencies

  VITE v4.4.9  ready in 3196 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

圖二、在 http://localhost:5173/ 運行的 Svelte 樣板網頁！