Vite を使うと Svlete の開発環境が簡単に構築できる
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 の開発環境を作る
-
Node.js - v20.11.1 LTS をダウンロードしてインストールする。
-
Vite をインストールする。
> npm create vite@latest
-
create-vite パッケージをインストールしてよいか聞かれる。
y を入力して Enter 。*すでにパッケージがインストールされている場合は聞かれない。
Need to install the following packages: create-vite@5.2.0 Ok to proceed? (y)
-
プロジェクト名を入力する。何も入力せず Enter すると vite-project になる。
? Project name: » vite-project
-
Svelte にカーソルを合わせて Enter 。
? Select a framework: » - Use arrow-keys. Return to submit. Vanilla Vue React Preact Lit > Svelte Solid Qwik Others
-
JavaScript にカーソルを合わせて Enter 。
ちなみに選ぶのは TypeScript でも SvelteKit でもかまわない。
(個々の環境に合わせて適切なものを選ぶ)? Select a variant: » - Use arrow-keys. Return to submit. TypeScript > JavaScript SvelteKit ↗
-
カレントフォルダにプロジェクトフォルダが作られる。
Scaffolding project in C:\home\username\dev\vite-project... Done. Now run: cd vite-project npm install npm run dev
続けて「Now run:」に表示されたコマンドを順番に実行する。
-
プロジェクトフォルダをカレントにする。
> cd vite-project
-
npm install コマンドを実行する。
必要なパッケージがインストールされる。> npm install
-
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 で終了できることがわかった。
-
表示された URL にブラウザでアクセスする。
Web アプリが表示されたら成功。
プロジェクト名とテンプレートが決まっていれば、npm コマンドのオプションで指定してもいい。
いろいろやり取りすることなく、一発でプロジェクト作成までできる。
以下コマンドの vite-project-2 がプロジェクト名、–template svelte の svelte がテンプレートになる。
プロジェクト名と –template の間にある2つのハイフンは必要なもの。打ち間違いではない。
> npm create vite@latest vite-project-2 -- --template svelte
アカウントを作成 して、もっと沢山の記事を読みませんか?
この記事にコメントをしてみませんか?