$30 off During Our Annual Pro Sale. View Details »

Vite & TYPO3

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.

Simon Praetorius

June 03, 2023
Tweet

More Decks by Simon Praetorius

Other Decks in Programming

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
    @[email protected]
    [email protected]

    View Slide