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
   

   View Slide

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
   

   View Slide

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

   View Slide

4. Vite kennenlernen
   Simon Praetorius
   Vite & TYPO3
   

   View Slide

5. Simon Praetorius
   Vite & TYPO3
   

   View Slide

6. opinionated
   „sensible defaults“
   

   (≠ Webpack)
   
   
   Einstiegspunkt index.html
   

   (SPA-Ansatz)
   
   
   moderne Browser
   

   (ES Modules, Dynamic Imports)
   Simon Praetorius
   Vite & TYPO3
   

   View Slide

7. 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
   

   View Slide

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
   

   &
   

   View Slide

9. gute Mischung:
   

   opinionated und flexibel
   

   schlank und mächtig
   
   
   aktive Weiterentwicklung
   
   
   stetig zunehmende Verbreitung
   Warum Vite?
   Simon Praetorius
   Vite & TYPO3
   

   View Slide

10. Vite einrichten
    Simon Praetorius
    Vite & TYPO3
    

    View Slide

11. NPM
    Simon Praetorius
    Vite & TYPO3
    npm install --save-dev
    

    vite
    

    vite-plugin-auto-origin
    

    sass
    

    View Slide

12. Shortcut: Console Command
    Simon Praetorius
    Vite & TYPO3
    vendor/bin/typo3 vite:config
    

    --entry EXT:sitepackage/
    

    Resources/Private/Main.entry.js
    

    --outputfile ./vite.config.js
    (Teil von vite_asset_collector)
    

    View Slide

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

    View Slide

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,
    
    
    });
    Input / Output
    Simon Praetorius
    Vite & TYPO3
    

    View Slide

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,
    
    
    });
    Manifest-Datei
    Simon Praetorius
    Vite & TYPO3
    

    View Slide

16. 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
    

    View Slide

17. public/_assets/vite/
    
    
    ✦ manifest.json
    
    
    ✦ assets/
    
    
    ✦ _Utils-edc17f93.js
    
    
    ✦ Main.entry-b51e57f8.js
    
    
    ✦ Main.entry-47d11998.css
    Ergebnis
    Simon Praetorius
    Vite & TYPO3
    vite build
    

    View Slide

18. 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)
    

    View Slide

19. 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:
    

    View Slide

20. 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
    

    View Slide

21. Vite in TYPO3 integrieren
    Simon Praetorius
    Vite & TYPO3
    

    View Slide

22. Simon Praetorius
    Vite & TYPO3
    

    View Slide

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

    View Slide

24. Fluid
    Simon Praetorius
    Vite & TYPO3
    
    Entrypoint (JS + CSS) einbinden:
    
    
    rel="preload"
    
    
    href="{vac:resource.vite(
    
    
    file: 'EXT:sitepackage/Resources/Private/Fonts/webfont.woff2'
    
    
    )}"
    
    
    ...
    
    
    />
    Asset-URL extrahieren:
    

    View Slide

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

    View Slide

26. Konfiguration
    Simon Praetorius
    Vite & TYPO3
    

    View Slide

27. Demo
    Simon Praetorius
    Vite & TYPO3
    Dokumentation
    

    View Slide

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

    View Slide

29. Simon Praetorius
    Web Consultant, Coach & Web Developer
    www.praetorius.me @s2bproject
    @s2b@norden.social
    moin@praetorius.me
    

    View Slide