Elm Assets mit Parcel einfach verpacken

Max Burri

Mit der kürzlich erschienen Version 1.10 unterstützt Parcel jetzt auch Elm Assets ohne zusätzliches Plugin – damit wird das Projekt Setup einer Elm Webapp massiv vereinfacht. Wie ein solches Projekt Setup aussehen kann, wird in diesem Blogpost beschrieben.

Parcel – Geschenke verpacken oder was?

Die Aufgabe eines Bundlers ist es, die Assets einer Webapplikation (HTML, CSS, Javascript, Images etc.) und ihre Dependencies aufzubereiten, so dass die Applikation am Schluss optimal an den Browser ausgeliefert wird. Parcel ist eine Alternative zu Webpack, Browserify und Rollup. Im Gegensatz zu diesen kommt Parcel ohne jegliche Konfiguration aus. Wollte man bisher eine Elm-Applikation mit Parcel builden, war man auf externe Plugins angewiesen.  Das ist zwar nicht schlecht, aber es ist natürlich umso schöner, wenn ein Tool die gewünschte Funktionalitäten gleich von Haus aus mitbringt.

Projekt Setup

(Lieber Leser: mach mit!)

Das Setup einer Elm-Applikation mit Parcel als Bundler gestaltet sich tatsächlich extrem einfach. Voraussetzung ist lediglich eine relativ aktuelle node/npm Installation, wie beispielsweise:

Anschliessend kann das Projekt erstellt werden:

Als Einstiegspunkt erstellen wir die Datei  index.html:

Das HTML unserer Applikation ist minimal: Ein div-Element enthält und lädt unsere Applikation.

Die Applikation ist vorerst in reinem Javascript gehalten und ersetzt lediglich den Inhalt des HTML Elements mit einem Text:

Und main.js sieht wie folgt aus:

Die Applikation kann nun mit ./node_modules/.bin/parcel index.html gestartet werden – am einfachsten geht dies mit einem spezifischen npm-Script in  package.json:

Jetzt kann die Applikation über das Skript gestartet werden:

Betrachtet man den Quelltext im Browser erkennt man, dass Parcel unsere Datei main.js mit einem Hash versehen und in index.html die entsprechende Anpassung vorgenommen hat. Anpassungen in unserer Applikation werden zudem wie erwartet automatisch im Browser nachgeladen.

Elm Assets verpacken

Anstatt einfach mit Javascript in den Dom-Node  zu schreiben wollen wir dort jetzt eine Elm-Applikation mounten.

Dazu schreiben wir die wohl bekannteste Applikation aller Zeiten, jetzt einfach in Elm – Hello World und zwar in src/Main.elm:

(Main.elm)

In main.js können wir jetzt die Elm-Applikation importieren und auf dem div initialisieren:

Sobald diese Datei gespeichert wird, merkt Parcel, dass wir jetzt ein Elm-Asset laden wollen. Automatisch werden alle notwendigen Dependecies installiert und die Konfigurationsdatei elm.json initialisiert!

Damit haben wir eine simples aber robustes Projektsetup für die Entwicklung von Elm-Applikationen erstellt.

Production Build und Optimierungen

Zu den Merkmalen des kürzlich erfolgten Releases von Elm 0.19 sind die Optimierungen des Compilers, welche auf die funktionale Natur der Sprache zurückzuführen sind. Parcel beherzigt die entsprechenden Empfehlungen aus dem Elm Guide, wie aus dem entsprechenden Source Code unschwer zu erkennen ist.

Ein einfaches Skript in package.json zum Builden unserer Applikation genügt, um ein optimales Resultat zu erhalten:

Fazit

Die ersten Gehversuche mit Parcel sind vielversprechend: innerhalb weniger Minuten ist ein simples aber robustes Projekt erstellt, welches sowohl für die Entwicklungsphase als auch für die Produktion bereits ansprechende bis optimale Resultate liefert – und dies ohne jegliche Konfiguration (ein Weg, den z.B. Webpack mit den neuesten Releases ebenfalls eingeschlagen hat).

Die Integration mit Elm ist sehr gut gelöst – der Entwickler muss keine zusätzlichen Dependencies  installieren oder zusätzliche Schritte im Projekt Setup durchführen, sobald ein Elm Asset eingebunden wird übernimmt Parcel die gesamte Arbeit.
Das gleiche gilt für all die anderen Assets, die von Parcel unterstützt werden: z.B. Sass, Less, Reason u.v.m

Das hier erstellte Template ist auf Github veröffentlicht und kann für eigene Projekte verwendet werden: https://github.com/mburri/elm-starter-parcel

Schreibe einen Kommentar