Vituum
使用環境
| Name | Version |
|---|---|
| Vite | v4.0.3 |
| Vituum | 0.0.38 |
| @vituum/nunjucks | 0.1.1 |
| @vituum/vite-plugin-nunjucks | 0.1.5 |
ツイッターの呟きで知ったのですが、Vituumというのがあるのを知りました。
Template engine用のプラグインがあるのですが、多彩です。
- PostHTML
- twig
- latte
- liquid
- nunjucks
- pug
- handlebars
フォルダ構造
開発時に使うファイルは、全てsrcフォルダの中なので、とてもシンプルです。
下記は、私が試した時のフォルダ構成です。
├── src │ ├── styles │ ├── templates │ └── views ├── package.json └── vite.config.js
publicフォルダ
Vituumでは、Viteで言うところのdistフォルダが、publicフォルダになるので、Laravel Valetを使っている私には、便利だと思いました。
Viteを使い始めた頃、Laravel Valetの使用を諦めた時期がありました。
Vituumの設定を参考にして、もう一度、Laravel Valetの使用を試してみようと思いました。
examples/bootstrap
examplesフォルダの中のbootstrapを試してみました。
ViteでBootstrapを使う時の見本のように感じました。
examples/nunjucks
examplesフォルダの中のnunjucksを試してみました。
調べると、@vituum/nunjucksと@vituum/vite-plugin-nunjucksがあります。
@vituum/nunjucksは、@vituum/vite-plugin-nunjucksを利用して、vituumでnunjucksが簡単に使えるようにしている感じなのかな？
<!-- src/views/index.njk --> {% extends 'templates/Layout/master.njk' %} {% block js %} <script type="module" src="/src/scripts/main.js"></script> {% endblock %}
<!-- src/templates/Layout/master.njk -->
{% block js %}{% endblock -%}
@vituum/nunjucksを使って、blockで、jsを定義すると、エラーが出ます。
@vituum/vite-plugin-nunjucksを使うと、エラーが出ませんでした。
src/assets
src/assetsフォルダとは、Viteで例えると、publicフォルダのことです。
src/assetsフォルダの中に、imagesフォルダを作成して、画像ファイルを入れました。
buildすると、public/assetsフォルダの中に、画像ファイルが入っていて、imagesフォルダがありません。
感想
シンプルで学習コストが低そうなイメージがあったので、これからの経緯を見守りたいと思いました。
