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.
Vite & TYPO3modernes, vielseitiges Frontend-Setupmit Hot ReloadSIMON PRAETORIUS
View Slide
hire me for your project!Simon Praetorius13 Jahre TYPO3 in AgenturenOpenSource:✦ Fluid Components✦ Vite AssetCollector✦ Fluid Maintainer Teamselbstständig seit 1. Juni
1) Vite kennenlernen2) Vite einrichten3) Vite in TYPO3 integrieren4) DemoSimon PraetoriusVite & TYPO3
Vite kennenlernenSimon PraetoriusVite & TYPO3
Simon PraetoriusVite & TYPO3
opinionated„sensible defaults“ (≠ Webpack)Einstiegspunkt index.html (SPA-Ansatz)moderne Browser (ES Modules, Dynamic Imports)Simon PraetoriusVite & TYPO3
Support für TypeScript, PostCSS, SASS und LESSPlugIns für React, Preact, Vue, Svelte und Litkann umfangreich konfiguriert werden (muss aber nicht)flexibelSimon PraetoriusVite & TYPO3
Dev ServerFile WatcherLive Reload und Hot Module Replacementvite ddev vite-serveSimon PraetoriusVite & TYPO3JS Bundlerbasiert auf Rollup.jsBackend-Integration über manifest.jsonvite build &
gute Mischung: opinionated und flexibel schlank und mächtigaktive Weiterentwicklungstetig zunehmende VerbreitungWarum Vite?Simon PraetoriusVite & TYPO3
Vite einrichtenSimon PraetoriusVite & TYPO3
NPMSimon PraetoriusVite & TYPO3npm install --save-dev vite vite-plugin-auto-origin sass
Shortcut: Console CommandSimon PraetoriusVite & TYPO3vendor/bin/typo3 vite:config --entry EXT:sitepackage/ Resources/Private/Main.entry.js --outputfile ./vite.config.js(Teil von vite_asset_collector)
vite.config.jsSimon PraetoriusVite & TYPO3import { 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,});
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 / OutputSimon PraetoriusVite & 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,});Manifest-DateiSimon PraetoriusVite & 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,});TYPO3-AnpassungenSimon PraetoriusVite & TYPO3
public/_assets/vite/✦ manifest.json✦ assets/✦ _Utils-edc17f93.js✦ Main.entry-b51e57f8.js✦ Main.entry-47d11998.cssErgebnisSimon PraetoriusVite & TYPO3vite build
manifest.jsonSimon PraetoriusVite & 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)
Best PracticesSimon PraetoriusVite & TYPO3import.meta.glob("../Components/**/*.{css,js}", {eager: true})import "JavaScript/Slider.js"import "Css/Main.css"import "Css/Main.scss"dedizierte Entrypoint-Datei(en): *.entry.jsselektives Bundling:rekursives Bundling:
Pfade & SCSSSimon PraetoriusVite & TYPO3Bug bei relativen Pfaden in verschachtelten SCSS-Dateien github.com/vitejs/vite/issues/11012Workarounds:1)Pfade relativ zum Entrypoint definieren2)resolve.alias in vite.config.js nutzen
Vite in TYPO3 integrierenSimon PraetoriusVite & TYPO3
ComposerSimon PraetoriusVite & TYPO3composer require praetorius/vite-asset-collector
FluidSimon PraetoriusVite & TYPO3Entrypoint (JS + CSS) einbinden:rel="preload"href="{vac:resource.vite(file: 'EXT:sitepackage/Resources/Private/Fonts/webfont.woff2')}".../>Asset-URL extrahieren:
YAMLSimon PraetoriusVite & TYPO3editor:config:contentsCss:- "%vite('EXT:sitepackage/Resources/Private/Css/Rte.css')%"CSS für RTE einbinden:
KonfigurationSimon PraetoriusVite & TYPO3
DemoSimon PraetoriusVite & TYPO3Dokumentation
Vielen Dankfür die Aufmerksamkeit!Simon PraetoriusVite & TYPO3
Simon PraetoriusWeb Consultant, Coach & Web Developerwww.praetorius.me @s2bproject@[email protected][email protected]