Tweet
Tweet

Slide 1

Slide 1 text

Vite & TYPO3 modernes, vielseitiges Frontend-Setup mit Hot Reload SIMON PRAETORIUS

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

1) Vite kennenlernen 2) Vite einrichten 3) Vite in TYPO3 integrieren 4) Demo Simon Praetorius Vite & TYPO3

Slide 4

Slide 4 text

Vite kennenlernen Simon Praetorius Vite & TYPO3

Slide 5

Slide 5 text

Simon Praetorius Vite & TYPO3

Slide 6

Slide 6 text

opinionated „sensible defaults“ (≠ Webpack) Einstiegspunkt index.html (SPA-Ansatz) moderne Browser (ES Modules, Dynamic Imports) Simon Praetorius Vite & TYPO3

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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 &

Slide 9

Slide 9 text

gute Mischung: opinionated und flexibel schlank und mächtig aktive Weiterentwicklung stetig zunehmende Verbreitung Warum Vite? Simon Praetorius Vite & TYPO3

Slide 10

Slide 10 text

Vite einrichten Simon Praetorius Vite & TYPO3

Slide 11

Slide 11 text

NPM Simon Praetorius Vite & TYPO3 npm install --save-dev vite vite-plugin-auto-origin sass

Slide 12

Slide 12 text

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, });

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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)

Slide 18

Slide 18 text

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:

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Vite in TYPO3 integrieren Simon Praetorius Vite & TYPO3

Slide 21

Slide 21 text

Simon Praetorius Vite & TYPO3

Slide 22

Slide 22 text

Composer Simon Praetorius Vite & TYPO3 composer require praetorius/vite-asset-collector

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Fluid-Einbindung Simon Praetorius Vite & TYPO3 Entrypoint (JS + CSS) einbinden: Asset-URL extrahieren:

Slide 25

Slide 25 text

YAML-Support Simon Praetorius Vite & TYPO3 editor: config: contentsCss: - "%vite('EXT:sitepackage/Resources/Private/Css/Rte.css')%" CSS für RTE einbinden:

Slide 26

Slide 26 text

Konfiguration Simon Praetorius Vite & TYPO3

Slide 27

Slide 27 text

Demo Simon Praetorius Vite & TYPO3 Dokumentation

Slide 28

Slide 28 text

Vielen Dank für die Aufmerksamkeit! Simon Praetorius Vite & TYPO3

Slide 29

Slide 29 text

Simon Praetorius Web Consultant, Coach & Web Developer www.praetorius.me @s2bproject @[email protected] [email protected]