Vite を使うと Svlete の開発環境が簡単に構築できる

Vite を使って Svelte の開発環境を構築した。

と言っても Node.js をインストールしてコマンドをいくつか叩いただけ。簡単だった。

構築までの手順を紹介する。

環境

Vite は Node.js 18+ または 20+ が必要とのことなので、v20.11.1 LTS を使った。
Node.js に同梱されている npm のバージョンは 10.2.4 だった。

今回の環境構築でインストールされたパッケージのバージョンは以下のとおり。

• Vite v5.1.3
• vite-plugin-svelte v3.0.2
• Svelte v4.2.11

Svelte の開発環境を作る

1. Node.js - v20.11.1 LTS をダウンロードしてインストールする。

2. Vite をインストールする。

   > npm create vite@latest

3. create-vite パッケージをインストールしてよいか聞かれる。
   y を入力して Enter 。

   ＊すでにパッケージがインストールされている場合は聞かれない。

   Need to install the following packages:
   create-vite@5.2.0
   Ok to proceed? (y)

4. プロジェクト名を入力する。何も入力せず Enter すると vite-project になる。

   ? Project name: » vite-project

5. Svelte にカーソルを合わせて Enter 。

   ? Select a framework: » - Use arrow-keys. Return to submit.
       Vanilla
       Vue
       React
       Preact
       Lit
   >   Svelte
       Solid
       Qwik
       Others

6. JavaScript にカーソルを合わせて Enter 。
   ちなみに選ぶのは TypeScript でも SvelteKit でもかまわない。
   （個々の環境に合わせて適切なものを選ぶ）

   ? Select a variant: » - Use arrow-keys. Return to submit.
       TypeScript
   >   JavaScript
       SvelteKit ↗

7. カレントフォルダにプロジェクトフォルダが作られる。

   Scaffolding project in C:\home\username\dev\vite-project...
   
   Done. Now run:
   
     cd vite-project
     npm install
     npm run dev

   続けて「Now run:」に表示されたコマンドを順番に実行する。

8. プロジェクトフォルダをカレントにする。

   > cd vite-project

9. npm install コマンドを実行する。
   必要なパッケージがインストールされる。

   > npm install

10. npm run コマンドを実行する。
    開発サーバーが起動される。

    > npm run dev

    h + Enter でショートカットキーを表示できる。

    Shortcuts
    press r + enter to restart the server
    press u + enter to show server url
    press o + enter to open in browser
    press c + enter to clear console
    press q + enter to quit

    とりあえず q + Enter で終了できることがわかった。

11. 表示された URL にブラウザでアクセスする。
    Web アプリが表示されたら成功。

    

プロジェクト名とテンプレートが決まっていれば、npm コマンドのオプションで指定してもいい。

いろいろやり取りすることなく、一発でプロジェクト作成までできる。

以下コマンドの vite-project-2 がプロジェクト名、–template svelte の svelte がテンプレートになる。

プロジェクト名と –template の間にある2つのハイフンは必要なもの。打ち間違いではない。

> npm create vite@latest vite-project-2 -- --template svelte