elm make
Ein Elm Programm übersetzen
Da Webbrowser keine Elm-Programme ausführen können, muss dein Programm erst noch in ein Javascript-Programm übersetzt werden. Am einfachsten erreichst du das im Terminal mit der Anweisung:
elm make src/Main.elm
Dadurch wird eine HTML-Datei index.html erstellt, die sowohl HTML-Tags als auch das gesamte Javascript-Programm enthält.
Aufgabe 1
Probiere das selbst einmal aus und öffne die HTML-Datei im Browser. Du müsstest im Browser folgendes Ergebnis erhalten:
Separate Javascript-Datei
Die beschriebene Vorgehensweise ist einfach, hat aber den Nachteil, dass bei jedem Übersetzungsvorgang die index.html-Datei überschrieben wird. Du hast also keine Möglichkeit selbst Anpassungen an der Datei vorzunehmen, wenn du noch zusätzliche HTML-Tags oder CSS ergänzen möchtest. Außerdem möchte man oft den erzeugten Javascript-Code separat haben, um ihn z.B. weiterzugeben oder in anderen Projekten nutzen zu können.
Deshalb erzeugt man meist eine separate Javascript-Datei, die dann in eine HTML-Datei eingebunden wird. Dazu dient der Befehl:
elm make src/Main.elm --output=elmapp.js
Um die Javascript-Datei in die HTML-Datei einzubinden, nutzen wir fast den gleichen Code wie in
ellie-app.
Dieser wird um den Eintrag <script src="elmapp.js"></script> ergänzt, damit die
von uns erzeugte Javascript-Datei eingebunden wird:
<html>
<head>
<style>
/* you can style your program here */
</style>
</head>
<body>
<main></main>
<script src="elmapp.js"></script>
<script>
var app = Elm.Main.init({ node: document.querySelector('main') })
// you can use ports and stuff here
</script>
</body>
</html>
Aufgabe 2
Probiere das selbst aus, indem du eine index.html-Datei mit dem oben dargestellten Inhalt erstellst und das Elm-Programm in eine separate Javascript-Datei übersetzt. Das Ergebnis müsste das gleiche sein wie in der oben beschriebenen Variante.
