Vite の vanilla-ts テンプレートで生成したプロジェクトで vite-plugin-handlebars を利用する
k-ta-yamadanpm create vite@latest ${PROJECT_NAME} -- --template vanilla-ts
という感じで vanilla で生成したプロジェクトにて。
テンプレートを使って値を埋め込みたい、とかは不要で、シンプルに既存の index.html を別ファイルに分割し、index.html で include したい、みたいな。
更にはできるだけプラグインの設定などもシンプルなものが良い。
k-ta-yamadavite import partial html でググった最初に出てきた Stack Overflow
そうそう。そーゆーことがしたい。
回答にあったのは以下 2 点。
- vite-plugin-handlebars
- vite-plugin-html
k-ta-yamadaStack Overflow で紹介されていたプラグインは
Awesome Vite.js の Plugins > Transformers に記載あり。
せっかくなのでざっとほかも眺めてみて、結果、以下の３つが良いかなー、という感じ。
- vite-plugin-handlebars
- vite-plugin-html
- vite-plugin-html-inject
k-ta-yamadavite-plugin-handlebars
- https://github.com/alexlafroscia/vite-plugin-handlebars
- https://www.npmjs.com/package/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 |
- https://handlebarsjs.com
- https://github.com/handlebars-lang/handlebars.js
- https://www.npmjs.com/package/handlebars
| 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-yamadavite-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-yamadavite-plugin-html-inject
- https://github.com/donnikitos/vite-plugin-html-inject
- https://www.npmjs.com/package/vite-plugin-html-inject
| Weekly Downloads | 3,016 |
| Version | 1.0.1 |
| License | MIT |
| Unpacked Size | 9.77 kB |
| Total Files | 6 |
| Issues | 1 |
| Pull Requests | 0 |
| Last publish | 3 months ago |
Dependency が 0 だったりする。
k-ta-yamadavite-plugin-handlebars と vite-plugin-html であれば
どちらでも良いのかな、という気がする。
しかしやりたいことは
Handlebars で言うところの Partials だし
EJS で言うところの Includes で
であれば、
ほぼそれに特化している vite-plugin-html-inject で十分かな、という気がする。
設定もほぼ不要だし。
ただ他に比べて書き方がちょっと独特な点などが気にはなる。
k-ta-yamada./index.html と ./src/partials/header.html がある想定で。
vite-plugin-html-inject
Plugin 設定したら ./index.html に以下の記載するのみ。
<load ="src/partials/header.html" />
なのだが、やはり属性名がない感じがすごく気になる。
実装的には <load> タグを置換しているだけなので、
<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
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
k-ta-yamadavite-plugin-handlebars についてはこちらの記事も参考にさせて頂いた。
k-ta-yamada以下に記事として書き直した。