フロントエンド開発のビルドツール「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
コメントが承認されるまで時間がかかります。