Viteを使ってみる

投稿日：2023-02-11

Viteとはwebpackのようにjsやcssをコンパイルするツールです。
Vue.jsを作ったEvan Youさんが作ったらしく、Vue.js同様に楽に使い始められそうです。
https://ja.vitejs.dev/

放置していたサイトがコンパイルできなくなっていたので、Viteでコンパイルするよう作り替えてみました。
大した実装はしていないので、条件的には1ページだけのサイトでjsとsassがコンパイルできれば良いサイトです。

Viteプロジェクトの作成

まず、以下コマンドでViteプロジェクトを新規作成します。

$ npm create vite@latest

続けていいか聞かれるので「y」と入力します。

Ok to proceed? (y) y

プロジェクト名を入力します。
本例では「hogehoge-prj」。

✔ Project name: … hogehoge-prj

次にフレームワークを聞かれます。
当サイトはフレームワークを利用していなかったので「Vanilla」を選択します。
※上下キーで選択

? Select a framework: › - Use arrow-keys. Return to submit.
❯   Vanilla
    Vue
    React
    Preact
    Lit
    Svelte
    Others

次にJavaScriptかTypeScriptか選択します。
当サイトは「JavaScript」です。
※上下キーで選択

? Select a variant: › - Use arrow-keys. Return to submit.
❯   JavaScript
    TypeScript

これでプロジェクトが作成され、以下メッセージが表示されます。

Scaffolding project in /Users/goro/workspace/hogehoge-prj...

Done. Now run:

  cd hogehoge-prj
  npm install
  npm run dev

上記メッセージ通りにコマンドを打つとデフォルト状態でページが立ち上がります。

 VITE v4.1.1  ready in 170 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

こんな感じのクリックしただけカウントアップするページが表示されます。

ファイルとしては以下が生成されています。

counter.js
index.html
javascript.svg
main.js
node_modules/
package-lock.json
package.json
public/
style.css

sassのインストール

Viteはそのままではsassに対応していないようなので別途インストールします。

$ npm add -D sass

既存サイトをViteに取り込む

生成したViteプロジェクトに既存のサイトを反映させます。

index.htmlの修正

まず、index.htmlにページのテンプレート（html部分）を反映します。
jsの読み込みはbodyの最後でmain.jsを読み込むように記載するのみです。
cssに関してはコンパイルするものは記載する必要ありません。後述のpublicディレクトリに置かれたcssファイルは読み込む記載をする必要があります。

以下はデフォルトのindex.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

main.jsの修正

次にmain.jsにて必要なjsファイルやsassファイル、画像ファイルをimportします。
デフォルトではindex.htmlに<div id="app"></div>があるので、そこにjsにてHTMLを流し込んでいます。
固定な部分についてはJSで流し込まずにindex.htmlに直接記載してしまっても良さそうです。
既存サイトを取り込む際は必要な処理が他JSに全て書かれていると思うので、main.jsにはimportだけ記載すれば良いです。

以下はデフォルトのmain.js

import './style.css'
import javascriptLogo from './javascript.svg'
import { setupCounter } from './counter.js'

document.querySelector('#app').innerHTML = `
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
      <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
    </a>
    <h1>Hello Vite!</h1>
    <div class="card">
      <button id="counter" type="button"></button>
    </div>
    <p class="read-the-docs">
      Click on the Vite logo to learn more
    </p>
  </div>
`

setupCounter(document.querySelector('#counter'))

ここでimportしたファイルはCacheBusting対応（キャッシュ対策でファイル名にランダムな文字列が付く）されます。
画像ファイルに関しては上記デフォルトファイル内のsrc="${javascriptLogo}"でCacheBustingされたファイル名が読み込まれます。

その他固定ファイルの配置

生成されているpublicディレクトリ配下に置かれたファイルやディレクトリはそのままDocumentRootに置かれます。
コンパイルする必要の無いjs/cssファイルやCacheBustingをしない画像ファイルはここにおきます。

不要ファイルの削除

以下のファイルは不要なので削除してしまいます。

counter.js
javascript.svg
public/vite.svg

これでViteを使ったサイト構築は完了です。
npm run devコマンドでローカルで動かせますし、npm run buildでコンパイルしたファイルがdistディレクトリに出力されます。