HMR（≒ホットリロード）やビルドが高速と巷で話題の Vite。
Webpackやgulpからの移行を考えている人も多いのではないでしょうか。
しかし、jQueryやVanilla JS（生のJS）を使って受託制作を行おうとすると、設定すべき項目が多く、ちゃんと使える状態までに時間がかかります。
そこで、受託のWebサイト制作者向けに「Viteボイラープレート」を公開しました。
ぜひ使ってみてください。
特徴
- 今すぐに制作を開始できる。
- HTMLパーツを共通化できる。（Handlebarsを使用）
- HMR（ファイル保存時に自動でブラウザをリロードするようなイメージ。）
- ベンダープレフィックスの自動付与。
- JSONファイルでmeta情報を管理できる。
- 【ビルド時】画像の最適化（圧縮）ができる。
- 【ビルド時】HTMLを自動整形してくれる。
- 【デプロイ時】HTMLを圧縮（minify）してくれる。
- 【デプロイ時】SSHによるデプロイの雛形が用意されている。（Github Actionsを利用）
誰に向けたものか？
- LPやコーポレートサイトなどの受託制作をする人。
- WordPress組み込み前に静的コーディングしたい人。
- jQuery または Vanilla JSを使ってサイト制作をしたい人。
はじめかた
こちらからzip形式でダウンロードを行ってください。
展開後、任意の名前に変更して下記コマンドを実行します。
ターミナル／コマンドプロンプト
npm install
これで準備が整いました。
ローカルサーバーを起動する
ターミナル／コマンドプロンプト
npm run dev
たったこれだけで完了です。
これはサイト制作を行う度に実行する必要があります。
ビルドやデプロイについて
※なお、TypeScriptは採用していません。短期的なWebサイト制作においては効果を発揮しにくいという考えによるものです。
おわり
Viteならではのルールがいくつかあり、苦労した箇所もいくつかあります。（下層ページがビルド対象にならないことや、dev環境のaタグリンクでindex.htmlの省略の扱いなど。）
それらの面倒なことは先に僕が経験して README.md に集約しています。
ぜひお読み頂きご活用いただければと思います。
フロント実装だけのお仕事募集中！
X（Twitter）のDMにてお気軽にご相談ください！
- Webサイト制作（静的 / WordPress）
- Next.jsを用いた開発
- Shopify（OS2.0）のテーマを1から開発
- Playwrightを用いたWebスクレイピング
など。