なにか作ろうと思ったときに最初の関門となるのが開発環境の構築ですよね。
私は今までフロントエンド開発はGulpなどのタスクランナーを使って、pugやsassなどを自動コンパイルしてライブコーディングを行っていました。
その時にタスクランナーの設定が結構複雑で悩まされた思い出があります。
※ネット記事の書いている方法だとプラグインのバージョンが古いから今は使えない、プラグインの組み合わせも互換性があって互換性のあるバージョンを使わないといけない...etc
そこで最近Viteというものを見つけたので紹介します。
前提
タスクランナーもそうですが、基本的にフロントエンド開発ではnode.jsを使用します。
https://nodejs.org/ja
一般的には安定バージョンのLTSを使用するのでこちらをインストールしておくことが前提です。
使い方
1. ターミナルを起動してプロジェクトを作成したいディレクトリに移動します
2. 下記コマンドを実行します
npm init vite@latest
3. 対話方式でプロジェクト名、使用するJSフレームワーク、JS/TSの選択を答えます
npm init vite@latest
Need to install the following packages:
create-vite@4.3.2
Ok to proceed? (y) y
√ Project name: ... vite-project
√ Select a framework: » Vanilla
√ Select a variant: » JavaScript
4. 作成したプロジェクトに移動して下記コマンドを打ったら、開発環境が立ち上がります
npm run dev
これだけです！コマンドを数回だけ打つだけで終わりました！
これなら開発環境の構築に悩む人もいないでしょう！
拡張のやり方
Sassなどは別途モジュールインストールする必要があるのですが、こちらもタスクランナーと違って複雑なコンパイル設定などは不要です。
まず下記コマンドでsassモジュールをインストールします。
npm i -D sass
あとはcss拡張子をscss拡張子に変更して、htmlの参照もcssからscssに変更するだけです。
※scssファイルはそのままだとブラウザでは読み込まれないものなのですが、Viteが内部的に変換をかけてくれるようです。ディベロッパーツールで見ると、scssの参照箇所が変換されていました。
