vite-asset-collector
vite-asset-collector copied to clipboard
Documentation missing about how to reference assets just for certain content-elements
I just started refactoring my setup using this extension which is going quite well so far. All common/global scrips and packages I referenced in the app.js
, so far so good. But how does it work for assets which are needed only for certain content-elements?
For example, lets say we built a CardSlider content-element using the NPM package @splidejs/splide
. In my old setup I used Grunt which compiled the related JS file from Public/JavaScript/Components/my-cardslider.js
to Public/JavaScript/Components/my-cardslider.min.js
. The Splide library itself was copied by Grunt to Public/Libs/splidejs/
including all resources like theme CSS files.
Than in the template I could just reference the assets and they was loaded only if such a content-element was placed on a page.
Private/Templates/ContentElements/CardSlider.html
:
<f:asset.css identifier="splidejs-css" href="EXT:my_site/Resources/Public/Libs/splidejs/css/themes/splide-skyblue.min.css" />
<f:asset.script identifier="splidejs-js" type="module" src="EXT:my_site/Resources/Public/JavaScript/Components/my-cardslider.min.js" />
Using the vite-asset-collector, I tried the following:
assets/JavaScript/Components/my-cardslider.js
:
import Splide from '@splidejs/splide'
import '@splidejs/splide/css/skyblue'
// ... init all card-slider elements ...
// const cardSliders = document.querySelectorAll('.mz-cardslider')
// ...
Now, referencing it in the content-element template does not work, at least not for production, because the manifest.json
is missing the my-cardslider
-asset.
<!-- this works only in development context, because the file is loaded directly from original source -->
<vac:asset.vite manifest="EXT:mz_website/Resources/Public/manifest.json" entry="assets/JavaScript/Components/my-cardslider.js" />
A workaround is to import the my-cardslider.js
inside the app.js
, but than it is loaded always and everywhere, even if it's not needed. How is it possible to solve this issue?