ビルドツール【Vite】について簡単にご紹介

Viteとは？

「Vite（ヴィート）」とは2020年に発表されたわりと新しいフロントエンドのビルドツールで、開発者はVue.jsの作者であるEvan You氏です。
State of js 2021でもビルドツール部門の満足度は１位で注目を集めています。

特徴

開発時はビルドが不要です。「ES Modules」を利用して変更したファイルだけをコンパイルしてブラウザに送るので、大規模開発でも高速に動作します。

使い方

プロジェクト作成からサーバ起動してブラウザ確認するまでを説明します。
※Viteを事前にインストールすることなく実行できます。

プロジェクト作成

npm init vite@latest

実行するとプロジェクト名やフレームワークの質問が表示されるので選択して進みましょう。

$ npm init vite@latest
Need to install the following packages:
  create-vite@3.2.0
Ok to proceed? (y) y
✔ Project name: … first-vite
✔ Select a framework: › Vanilla
✔ Select a variant: › JavaScript

サーバ起動

まずは作成したプロジェクトディレクトリに移動して$ npm installを実行します。
次に$ run devを実行すれば開発サーバが起動します。

$ npm run dev        

> first-vite@0.0.0 dev
> vite


  VITE v3.2.1  ready in 232 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose

Localのところに記載されているhttp://127.0.0.1:5173/にアクセスすれば以下のような表示がブラウザで確認できます。

ビルド

$ npm run build

上記のコマンドを実行するとビルドされたファイルがdistディレクトリに出力されます。

ビルド後の確認

$ npm run preview

上記のコマンドを実行することによりdist内のファイルをブラウザで確認することができます。

$ npm run preview

> first-vite@0.0.0 preview
> vite preview

  ➜  Local:   http://127.0.0.1:4173/
  ➜  Network: use --host to expose