i

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:

Make einfache Variante

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.

Suche

v
8.2.3.1.3.1.2
dev.inf-schule.de/deklarativ/fp_elm/dynamischewebseiten/halloelm/lokal/lernstrecke/make
dev.inf-schule.de/8.2.3.1.3.1.2
dev.inf-schule.de/@/page/8qmWneI0Mts8fvjE

Rückmeldung geben