Javascript npm parcel und Workflow

[Honig]

Hi Leute,
das klingt jetzt so, als ob die ganze Entwicklung der letzten Jahre an mir vorbei gegangen ist ... nein ich habe sie geskippt weils mir zu kompliziert ist.
Ich muss aber jetzt mal verstehen, wie dieser ganze Javascript Rasselmassel funktioniert.
Ich will zum Beispiel für meine Contaoseite die Motion Lib nutzen (ist ein leichtgewichtiger "Ersatz" für GSAP).
Ich bekomme es nicht fertig irgendwie aus diesen NPM Paketen irgendwas zusammecompiliertes heraus zu bekommen (ja ich könnte mir das JS auch vom CDN ziehen und gut ist).
Ich frage mich immer wieder, warum alles auf irgendwelche Javscript Apps hinaus läuft die auf einem lokalen Dev Server laufen ... schließlich will ich doch irgend einen JS Klumpen haben, den ich per
import oder anderweitig in mein JS einbinde.
Wie geht das nun?
npm init -y
npm install motion
npm install parcel-bundler
und dann?
Was muss man üblicherweise machen um production ready JS Klumpen am Ende heraus zu bekommen? ( es gängen auch Verzeichnisstrukturen die man per import irgendwie leicht einbinden kann).
Kann mir das bitte mal jemand kurz erklären oder mir Modern JS Workflow für Dummies Lesestoff geben?
Grüße
Olli

[Dennis Fink]

Kurz gesagt, was du brauchst ist deine eigene Javascript-Datei, die bei Bedarf externe Libraries importieren kann. Und als zweites brauchst du irgendeinen Bundler und eine Konfiguration für diesen. Wenn dein Bundler konfiguriert ist, kannst du einen Befehl für den build-Prozess ausführen (der Befehl hängt vom benutzten Bundler). Dann wird dein Javascript "zusammengebaut" und am Ende hast du ein oder mehrere Javascript Bundle/s.

Es gibt da mittlerweile haufenweise Tools. Glaube am populärsten ist aktuell Vite. Das kannst du mit Vanilla JS, Typescript, React, Vue, usw. benutzen.

Hier ein paar interessante Videos:

• Module Bundlers explained
• Vite in 100 seconds
• Und hier eine Übersicht über aktuell populäre Frontend Tools (als Roadmap dargestellt)

Ich hoffe das hilft dir weiter.

[Dennis Fink]

Was vielleicht noch wichtig ist zu erwähnen: Wenn du deinen Javascript Code am Ende für eine Live-Umgebung zusammenbauen lässt, dann kommt tree-shaking zum Einsatz. Das bedeutet, der Bundler, bündelt tatsächlich nur den Code von externen Libraries zusammen, den du in deinen eigenen Skripten auch verwendest. Heißt wenn du nur 10% von einer externen Library verwendest, werde auch nur dies 10% am Ende in deinem Bundle vorhanden sein. Unter anderem deswegen möchte man i.d.R. in Live Umgebungen keine Libraries per CDN laden

[Honig]

Hi,
danke vielmals für deine Ausführungen. Ich hatte als Bundler parcel genommen (webpack ist mir zu kompliziert zu konfigurieren).
Diese Anleitungen von Parcel gehen immer irgendwie davon aus, dass ich irgendwie lokal mein HTML zusammen baue und das auf http://localhost:irgendwas ausgebe. Ich weiß nicht warum man von so ist.
Das Video über die JS Bundlers hätte ich eher haben sollen. Das hätte mir einiges an Arbeit erspart :-)
Ich habe zumindest gemerkt, dass ich im Großen und Ganzen das alles schon lange verstanden haben aber irgendwas fehlt mir noch um jetzt tatsächlich zu meinem gewünschten Ergebnis zu kommen bzw fehlt mir noch irgendwas damit ich diese ganzen JS Tools in mein lokales Toolset bekomme (nein ich nutze kein Gulp).
Alles in Allem habe ich den Eindruck, dass es irgendwie sehr unübersichtlich und komplex ist mit JS zu arbeiten aber wenn man weiß wies geht ist es einfach.
Trotzdem Danke ... ich muss noch ein paar Videos gucken
Olli

[Dennis Fink]

Ich denke ich verstehe dein Problem. Bei mir ist es glaube ich umgekehrt. Ich komme aus der Javascript-Welt und habe meine Schwierigkeiten mit der PHP/Contao-Welt. Aber was ich an deiner Stelle machen würde wäre folgendes:

- Unter files einen Ordner app anlegen.
- ein Projekt mit npm/yarn/pnpm initiieren
- app bekommt die Unterordner src/js und src/css (oder src/scss, je nachdem womit du arbeitest)
- src/js/index.js (oder index.ts, je nachdem womit du arbeitest) als Einstiegspunkt nutzen, d.h. für jede Funktionalität würde ich eine eigene js-Datei anlegen, und diese in der index.js importieren und ausführen
- eine config-Datei anlegen und den Einstiegspunkt angeben
- in package.json einen build/watch command definieren, der die gewünschten Dateien zusammen baut.

Und dann hast du (vermute ich) eigentlich alles was du brauchst.

[Honig]

Jetzt habe ich endlich ein Ergebnis dank deines Posts. Vite ist mir für den Einstieg auch irgendwie genau so anstrengend wie die anderen gewesen (es dauert mir einfach zu lange bis ich hinten raus einen JS Klumpen bekomme ... muss ich einfach zu viel lesen).
Ich bin über esbuild gestolpert ... Gleich auf der ersten Seite der Webseite steht alles was ich brauche um mein Ziel zu erreichen. Und fix ist das Teil auch noch.
Danke noch mal.