Zenn
Closed10

Vite の vanilla-ts テンプレートで生成したプロジェクトで vite-plugin-handlebars を利用する

#
ejs
Vite
#
handlebars
k-ta-yamadak-ta-yamada

npm create vite@latest ${PROJECT_NAME} -- --template vanilla-ts
という感じで vanilla で生成したプロジェクトにて。

テンプレートを使って値を埋め込みたい、とかは不要で、シンプルに既存の index.html を別ファイルに分割し、index.html で include したい、みたいな。

更にはできるだけプラグインの設定などもシンプルなものが良い。

k-ta-yamadak-ta-yamada

vite-plugin-handlebars
Weekly Downloads 2,492
Version 1.6.0
License MIT
Unpacked Size 50.8 kB
Total Files 10
Issues 8
Pull Requests 6
Last publish 2 years ago
Weekly Downloads 11,700,707
Version 4.7.7
License MIT
Unpacked Size 2.72 MB
Total Files 118
Issues 66
Pull Requests 18
Last publish 2 years ago
k-ta-yamadak-ta-yamada

vite-plugin-html
Weekly Downloads 142,397
Version 3.2.0
License MIT
Unpacked Size 25.4 kB
Total Files 5
Issues 47
Pull Requests 13
Last publish a year ago
Weekly Downloads 11,666,499
Version 3.1.8
License Apache-2.0
Unpacked Size 140 kB
Total Files 13
Issues 90
Pull Requests 11
Last publish 10 months ago
k-ta-yamadak-ta-yamada

vite-plugin-handlebars と vite-plugin-html であれば
どちらでも良いのかな、という気がする。
しかしやりたいことは

Handlebars で言うところの Partials だし
https://handlebarsjs.com/guide/partials.html

EJS で言うところの Includes で
https://ejs.co/#docs

であれば、
ほぼそれに特化している vite-plugin-html-inject で十分かな、という気がする。
https://github.com/donnikitos/vite-plugin-html-inject

設定もほぼ不要だし。
ただ他に比べて書き方がちょっと独特な点などが気にはなる。

k-ta-yamadak-ta-yamada

./index.html と ./src/partials/header.html がある想定で。

vite-plugin-html-inject

Plugin 設定したら ./index.html に以下の記載するのみ。

index.html
<load ="src/partials/header.html" />

なのだが、やはり属性名がない感じがすごく気になる。
実装的には <load> タグを置換しているだけなので、

index.html
<load foo="src/partials/header.html" />

という感じに適当な属性名を設定しても動くが、それもそれでなんとなく気になる感じではある。
結果、以下の点などから採用を見送った。

  • load というタグ名が汎用にすぎないか
    たとえばカスタム要素みたいに load-partials とかになっててもよいのではないか
  • 属性名なしで値あり、みたいな記述が構文的に気になる
    src とかじゃだめだったのだろうか
  • 閉じタグ </load> を書いてしまうとそれ以後の他のタグの表示がおかしくなる
    ので、エディタで自動補完とかされちゃうといきなり表示崩れたりするのが少しイヤ

しかし今回の要件は満たしてくれるし、ミニマムで個人的にはかなり好き。

vite-plugin-html

利用数は今回の 3 つで一番多そうで、できることも多そうな印象なんだけど、
逆に設定面倒そうだな、と思っていた。

結果 <%- include('/src/partials/header.html'); %> と書いても
ENOENT: no such file or directory, open '/src/partials/header.html' と、なんかうまく行かず、
設定いじったりパス変えて試してみたけど面倒になって、んじゃもう 1 つの vite-plugin-handlebars を試すか、となって検証やめた。

vite-plugin-handlebars

結局 Stack Overflow で最初に見たものを採用することとした。
プラグインの設定が不要だった vite-plugin-html-inject に比べて設定が必要になるものの以下だけだし。

vite.config.js
// vite.config.js
import { resolve } from 'path';
import handlebars from 'vite-plugin-handlebars';

export default {
  plugins: [
    handlebars({
      partialDirectory: resolve(__dirname, 'partials'),
    }),
  ],
};

https://github.com/alexlafroscia/vite-plugin-handlebars#partials

このスクラップは2023/03/05にクローズされました