🍆
【Vite】jQueryやVanilla JSでWebサイト制作をしたい人のためにボイラープレートを公開しました。
HMR（≒ホットリロード）やビルドが高速と巷で話題の Vite。
Webpackやgulpからの移行を考えている人も多いのではないでしょうか。
しかし、jQueryやVanilla JS（生のJS）を使って受託制作を行おうとすると、設定すべき項目が多く、ちゃんと使える状態までに時間がかかります。下層ページをビルドしてくれなかったり...。
そこで、受託のWebサイト制作者向けに「Viteボイラープレート」を公開しました。
ぜひ使ってみてください。
このボイラープレートの特徴
- 今すぐに制作を開始できる。
- HTMLパーツを共通化できる。（Handlebarsを使用）
- HMR（ファイル保存時に自動でブラウザをリロードするようなイメージ。）
- 下層ページを認識してビルドしてくれる。（本来ならrollupでリストアップする手間がある）
- ベンダープレフィックスの自動付与。
- 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 に集約しています。
ぜひお読み頂きご活用いただければと思います。
Discussion