viteとバニラJSとBulmaでフロントエンドの環境構築をしてみる

ビルドツールにVite、cssフレームワークにBulmaを使用してフロントエンドの環境構築をしてみました。

viteでプロジェクトを作成する

プロジェクトの作成にはViteを使いました。次のようにnpmコマンドを入力すると対話形式でプロジェクトの作成が始まります。(npmコマンドを使用するには、Node.jsのインストールが必要です。)

プロジェクトの名前、パッケージの名前、使用するフレームワーク、使用する言語を選択するとプロジェクトが作成されます。今回はパッケージの名前はデフォルトのままで使用するフレームワークと言語はバニラJSを選択しました。

作成したプロジェクトのフォルダに移動をし、パッケージをインストールします。

以下のようなフォルダ構成でプロジェクトが作成されます。

cssフレームワークのBulmaをインストールする

npmを利用してbulmaをインストールする。

main.jsファイルを開き下記のコードを追記してbulmaのcssを読み込む

開発サーバーを起動させる

下記のコマンドを実行すると開発サーバーが起動されます。

index.htmlにbulmaのユーティリティクラスを使用して、コンテンツのスタイルを設定すると反映されていることが確認できます。

設定ファイルの作成とビルド

viteでビルドしたindex.htmlファイルはcssファイルなどをデフォルトではルートパスで読み込む設定になっているので、相対パスで読み込みするように設定を変えました。

プロジェクトルートにvite.config.jsファイルを作成して設定オプションを追記します。

下記コマンドを実行するとビルドが開始され、distフォルダにビルドされたファイルが生成されます。

ここまでのファイル構成は以下になります。

最後までお読みいただきありがとうございました。