Viteを使ってみる

フロントエンド開発のビルドツール「Vite」(ヴィート)を簡単に使ってみます。
Viteはフランス語で「素早い」という意味で、高速で動作するのが特徴の1つのようです。

設定方法

まずはプロジェクトを作成します。
プロジェクトを作成するディレクトリへ移動して、下記コマンドを実行します。

npm create vite@latest

まずプロジェクト名を聞かれるので入力します。
今回はデフォルトのvite-projectのまま進めます。

? Project name: » vite-project

次に使用するフレームワークを選択します。
なにも使用しないのでVanillaを選択します。

? Select a framework: » - Use arrow-keys. Return to submit.
>   Vanilla
    Vue
    React
    Preact
    Lit
    Svelte

JavaScriptかTypeScriptかを選択します。
今回はJavaScriptを選択します。

? Select a variant: » - Use arrow-keys. Return to submit.
>   JavaScript
    TypeScript

これでプロジェクトを作成できました。
プロジェクトディレクトリに移動します。

cd vite-project

Viteの環境で使用するモジュールをインストールします。

npm install

これでViteの環境の準備ができました。
開発サーバを起動してみます。

npm run dev

Local: に表示されるURLをブラウザで確認すると、ページを確認できました。

プロジェクトディレクトリ内の構成は以下のようになっています。

  • public/
    • vite.svg
  • .gitignore
  • counter.js
  • index.html
  • javascript.svg
  • main.js
  • package.json
  • package-lock.json
  • style.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>

index.html内で読み込まれている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'))

1行目でstyle.cssを読み込み、5~21行目がindex.htmlの#appへのコンテンツの埋め込みを行い、3,23行目でサンプル処理としてカウントアップボタンの読み込みを行っています。
counter.jsの中身は以下のような内容です。

export function setupCounter(element) {
  let counter = 0
  const setCounter = (count) => {
    counter = count
    element.innerHTML = `count is ${counter}`
  }
  element.addEventListener('click', () => setCounter(counter + 1))
  setCounter(0)
}

ビルド

下記コマンドでビルドを実行できます。

npm run build

distディレクトリに出力されます。

ビルド結果は下記コマンドでプレビューできます。

npm run preview

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年2月
 123
45678910
11121314151617
18192021222324
2526272829