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:
$ node --version v9.2.0 $ npm --version 5.5.1
Anschliessend kann das Projekt erstellt werden:
$ mkdir elm-parcel-project && cd $_ && npm init -y $ npm install --save-dev parcel-bundler
Als Einstiegspunkt erstellen wir die Datei index.html:
$ touch 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:
$ mkdir src/ && touch src/main.js
Und main.js sieht wie folgt aus:
document.getElementById('app').innerHTML="Hello Parcel";
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:
"scripts": {
"start": "parcel index.html --open
},
Jetzt kann die Applikation über das Skript gestartet werden:
$ npm start > elm-parcel-project@1.0.0 start /home/.../elm-parcel/elm-parcel-project > parcel index.html Server running at http://localhost:1234 > Built in 682ms.
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:
$ touch src/Main.elm
module Main exposing (main) import Html main = Html.text "Hello World from Elm!"
(Main.elm)
In main.js können wir jetzt die Elm-Applikation importieren und auf dem div initialisieren:
import { Elm } from './Main.elm'
var element = document.getElementById('app');
Elm.Main.init({node: element});
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:
"scripts": {
...
"build": "parcel build index.html"
}
> parcel build index.html > Built in 2.31s. dist/main.16091949.js 7.82 KB 1.76s dist/main.0a44fb6b.map 405 B 2ms dist/index.html 92 B 479ms
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