Vite & TYPO3

modernes, vielseitiges Frontend-Setup mit Hot Reload

Link zur Extension: https://github.com/s2b/vite-asset-collector

Dieser Talk stammt vom TYPO3 Camp Berlin-Brandenburg 2023.

Transcript

1. Vite & TYPO3 modernes, vielseitiges Frontend-Setup mit Hot Reload SIMON PRAETORIUS
2. hire me for your project! Simon Praetorius 13 Jahre TYPO3 in Agenturen OpenSource: ✦ Fluid Components ✦ Vite AssetCollector ✦ Fluid Maintainer Team selbstständig seit 1. Juni
3. 1) Vite kennenlernen 2) Vite einrichten 3) Vite in TYPO3 integrieren 4) Demo Simon Praetorius Vite & TYPO3
4. Vite kennenlernen Simon Praetorius Vite & TYPO3
5. Simon Praetorius Vite & TYPO3
6. opinionated „sensible defaults“ (≠ Webpack) Einstiegspunkt index.html (SPA-Ansatz) moderne Browser (ES Modules, Dynamic Imports) Simon Praetorius Vite & TYPO3
7. Zero-Config-Support für TypeScript, PostCSS, SASS und LESS PlugIns für React, Preact, Vue, Svelte und Lit kann umfangreich konfiguriert werden (muss aber nicht) flexibel Simon Praetorius Vite & TYPO3
8. Dev Server File Watcher Live Reload und Hot Module Replacement vite ddev vite-serve Simon Praetorius Vite & TYPO3 JS Bundler basiert auf Rollup.js Backend-Integration über manifest.json vite build &
9. gute Mischung: opinionated und flexibel schlank und mächtig aktive Weiterentwicklung stetig zunehmende Verbreitung Warum Vite? Simon Praetorius Vite & TYPO3
10. Vite einrichten Simon Praetorius Vite & TYPO3
11. NPM Simon Praetorius Vite & TYPO3 npm install --save-dev vite vite-plugin-auto-origin sass
12. vite.config.js Simon Praetorius Vite & TYPO3 import { defineConfig } from "vite" import autoOrigin from "vite-plugin-auto-origin" export default defineConfig({ base: "", build: { manifest: true, rollupOptions: { input: "packages/sitepackage/Resources/Private/Main.entry.js", }, outDir: "public/_assets/vite/", }, plugins: [ autoOrigin() ], publicDir: false, });
13. import { defineConfig } from "vite" import autoOrigin from "vite-plugin-auto-origin" export default defineConfig({ base: "", build: { manifest: true, rollupOptions: { input: "packages/sitepackage/Resources/Private/Main.entry.js", }, outDir: "public/_assets/vite/", }, plugins: [ autoOrigin() ], publicDir: false, }); Input / Output Simon Praetorius Vite & TYPO3
14. import { defineConfig } from "vite" import autoOrigin from "vite-plugin-auto-origin" export default defineConfig({ base: "", build: { manifest: true, rollupOptions: { input: "packages/sitepackage/Resources/Private/Main.entry.js", }, outDir: "public/_assets/vite/", }, plugins: [ autoOrigin() ], publicDir: false, }); Manifest-Datei Simon Praetorius Vite & TYPO3
15. import { defineConfig } from "vite" import autoOrigin from "vite-plugin-auto-origin" export default defineConfig({ base: "", build: { manifest: true, rollupOptions: { input: "packages/sitepackage/Resources/Private/Main.entry.js", }, outDir: "public/_assets/vite/", }, plugins: [ autoOrigin() ], publicDir: false, }); TYPO3-Anpassungen Simon Praetorius Vite & TYPO3
16. public/_assets/vite/ ✦ .vite/manifest.json ✦ assets/ ✦ _Utils-edc17f93.js ✦ Main.entry-b51e57f8.js ✦ Main.entry-47d11998.css Ergebnis Simon Praetorius Vite & TYPO3 vite build
17. manifest.json Simon Praetorius Vite & TYPO3 "sitepackage/Resources/Private/Main.entry.js": { "css": [ "assets/Main.entry-47d11998.css" ], "file": "assets/Main.entry-b51e57f8.js", "imports": [ "_Utils-edc17f93.js" ], "isEntry": true, "src": "sitepackage/Resources/Private/Main.entry.js" }, (generiert von vite)
18. Best Practices Simon Praetorius Vite & TYPO3 import.meta.glob("../Components/**/*.{css,js}", {eager: true}) import "JavaScript/Slider.js" import "Css/Main.css" import "Css/Main.scss" dedizierte Entrypoint-Datei(en): *.entry.js selektives Bundling: rekursives Bundling:
19. Pfade & SCSS Simon Praetorius Vite & TYPO3 Bug bei relativen Pfaden in verschachtelten SCSS-Dateien github.com/vitejs/vite/issues/11012 Workarounds: 1) Pfade relativ zum Entrypoint definieren 2) resolve.alias in vite.config.js nutzen
20. Vite in TYPO3 integrieren Simon Praetorius Vite & TYPO3
21. Simon Praetorius Vite & TYPO3
22. Composer Simon Praetorius Vite & TYPO3 composer require praetorius/vite-asset-collector
23. vite.config.js-Generator Simon Praetorius Vite & TYPO3 vendor/bin/typo3 vite:config --entry EXT:sitepackage/ Resources/Private/Main.entry.js --outputfile ./vite.config.js
24. Fluid-Einbindung Simon Praetorius Vite & TYPO3 <vac:asset.vite entry="EXT:sitepackage/Resources/Private/Main.entry.js" /> Entrypoint (JS + CSS) einbinden: <link rel="preload" href="{vac:resource.vite( file: 'EXT:sitepackage/Resources/Private/Fonts/webfont.woff2' )}" ... /> Asset-URL extrahieren:
25. YAML-Support Simon Praetorius Vite & TYPO3 editor: config: contentsCss: - "%vite('EXT:sitepackage/Resources/Private/Css/Rte.css')%" CSS für RTE einbinden:
26. Konfiguration Simon Praetorius Vite & TYPO3
27. Demo Simon Praetorius Vite & TYPO3 Dokumentation
28. Vielen Dank für die Aufmerksamkeit! Simon Praetorius Vite & TYPO3
29. Simon Praetorius Web Consultant, Coach & Web Developer www.praetorius.me @s2bproject @s2b@norden.social moin@praetorius.me