Elm Language Handledning
Komma igång med Elm Language

CSS F# Haskell Language HTML JavaScript Node.js React Regular Expressions Ruby on Rails SVG
Sök…


Anmärkningar

[Elm] [1] är ett vänligt funktionellt programmeringsspråk som sammanställs till JavaScript. Elm fokuserar på webbläsarbaserade gränssnitt, applikationer på en sida.

Användare berömmer vanligtvis det för:

versioner

Version Utgivningsdatum
0.18.0 2016/11/14
0.17.1 2016/06/27
0,17 2016/05/10
0,16 2015/11/19
0.15.1 2015/06/30
0,15 2015/04/20

Installation

För att starta utvecklingen med Elm måste du installera en uppsättning verktyg som kallas elm-plattform .

Den inkluderar: alm-make , alm-reactor , alm-repl och alm -package .

Alla dessa verktyg är tillgängliga via CLI, med andra ord kan du använda dem från din terminal.

Välj en av följande metoder för att installera Elm:

Använda installationsprogrammet

Ladda ner installationsprogrammet från den officiella webbplatsen och följ installationsguiden.

Använd npm

Du kan använda Node Package Manager för att installera Elm-plattformen.

Global installation: 

$ npm install elm -g

Lokal installation: 

$ npm install elm

Lokalt installerade Elm-plattformsverktyg är tillgängliga via: 

$ ./node_modules/.bin/elm-repl  # launch elm-repl from local node_modules/

Med hjälp av homebrew 

$ brew install elm

Växla mellan versioner med el-användning

Installera el-användning 

$ npm install -g elm-use

Byt till en äldre eller nyare alm-version 

$ elm-use 0.18  // or whatever version you want to use

Vidare läsning

Lär dig hur du initierar och bygger ditt första projekt.

Hej världen

Se hur du sammanställer denna kod i Initiera och bygg 

import Html

main = Html.text "Hello World!"

Editors

Atom

Ljusbord

Sublim text

vim

Emacs

IntelliJ IDEA

konsoler

VS-kod

Initiera och bygg

Du bör ha Elm-plattform installerad på din dator, följande handledning är skriven med antagandet att du är bekant med terminal.

initiering

Skapa en mapp och navigera till den med din terminal: 

$ mkdir elm-app
$ cd elm-app/

Initiera Elm-projektet och installera kärnberoenden: 

$ elm-package install -y

elm-package.json och elm-stuff mappen ska visas i ditt projekt.

Skapa Main.elm för din applikation Main.elm och klistra in Hello World- exemplet i den.

Bygga projektet

För att bygga ditt första projekt kör du: 

$ elm-make Main.elm

Detta kommer att producera index.html med Main.elm filen (och alla beroenden) sammanställda i JavaScript och inskrivna i HTML. Försök och öppna den i din webbläsare!

Om detta misslyckas med felet kan I cannot find module 'Html'. det betyder att du inte använder den senaste versionen av Elm. Du kan lösa problemet antingen genom att uppgradera Elm och göra om det första steget eller med följande kommando: 

$ elm-package install elm-lang/html -y

Om du har din egen index.html fil (t.ex. när du arbetar med portar) kan du också kompilera dina Elm-filer till en JavaScript-fil: 

$ elm-make Main.elm --output=elm.js

Mer information i exemplet Bädda in i HTML .

Style Guide och alm-format

Den officiella stilguiden finns på hemsidan och gäller i allmänhet för:

  • läsbarhet (istället för kompakthet)
  • enkel modifiering
  • ren diff

Detta innebär att till exempel detta: 

homeDirectory : String
homeDirectory =
  "/root/files"


evaluate : Boolean -> Bool
evaluate boolean =
  case boolean of
    Literal bool ->
        bool

    Not b ->
        not (evaluate b)

    And b b' ->
        evaluate b && evaluate b'

    Or b b' ->
        evaluate b || evaluate b'

anses vara bättre än: 

homeDirectory = "/root/files"

eval boolean = case boolean of
    Literal bool -> bool
    Not b        -> not (eval b)
    And b b'     -> eval b && eval b'
    Or b b'      -> eval b || eval b'
0,16

Verktyget elm-formatet hjälper till genom att formatera din källkod för dig automatiskt (vanligtvis vid spara), på liknande sätt som Go språk gofmt . Återigen är det underliggande värdet att ha en enhetlig stil och spara argument och flamewars om olika problem som flikar kontra mellanslag eller indragningslängd .

Du kan installera elm-format enligt anvisningarna på Github-repo . Konfigurera sedan din redigerare för att formatera Elm-filerna automatiskt eller köra elm-format FILE_OR_DIR --yes manuellt.

Bädda in i HTML

Det finns tre möjligheter att infoga Elm-kod på en befintlig HTML-sida.

Bädda in i kroppen-taggen

Antar att du har sammanställt Hello World- exemplet i elm.js fil, kan du låta Elm ta över <body> -taggen så: 

<!DOCTYPE html>
<html>
    <body>
        <script src="elm.js"></script>
        <script>
          Elm.Main.fullscreen()
        </script>
    </body>
</html>

VARNING : Ibland röra vissa kromförlängningar med <body> vilket kan göra att din app går sönder. Det rekommenderas att alltid bädda in i en specifik div. Mer info här .

Bädda in i en Div (eller annan DOM-nod)

Alternativt, genom att tillhandahålla ett konkret HTML-element, kan Elm-kod köras i det specifika sidelementet: 

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
    </head>
    <body>
        <div id='app'></div>
        <script src="elm.js"></script>
        <script>
            Elm.Main.embed(document.getElementById('app'))
        </script>
    </body>
</html>

Bädda in som webbarbetare (inget användargränssnitt)

Elmkod kan också startas som arbetare och kommunicera genom portar : 

<!DOCTYPE html>
<html>
    <head>
        <title>Hello Worker</title>
    </head>
    <body>
        <script src="elm.js"></script>
        <script>
            var app = Elm.Main.worker();
            app.ports.fromElmToJS.subscribe(function(world) {
                console.log(world)
            });
            app.ports.fromJSToElm.send('hello');
        </script>
    </body>
</html>

REPL

Ett bra sätt att lära sig om Elm är att försöka skriva några uttryck i REPL (Read-Eval-Print Loop). Öppna en konsol i din elm-app mapp (som du har skapat i initierings- och byggfasen) och prova följande: 

$ elm repl
---- elm-repl 0.17.1 -----------------------------------------------------------
 :help for help, :exit to exit, more at <https://github.com/elm-lang/elm-repl>
--------------------------------------------------------------------------------
> 2 + 2
4 : number
> \x -> x
<function> : a -> a
> (\x -> x + x)
<function> : number -> number
> (\x -> x + x) 2
4 : number
>

elm-repl är faktiskt ett ganska kraftfullt verktyg. Låt oss säga att du skapar en Test.elm fil i din elm-app mapp med följande kod: 

module Test exposing (..)


a = 1


b = "Hello"

Nu går du tillbaka till din REPL (som har varit öppen) och skriver: 

import Test exposing (..)
> a
1 : number
> b
"Hello" : String
>

Ännu mer imponerande om du lägger till en ny definition till din Test.elm fil, t.ex. 

s = """
Hello,
Goodbye.
"""

Spara din fil, gå tillbaka igen till din REPL, och utan att importera Test igen, är den nya definitionen tillgänglig omedelbart: 

> s
"\nHello,\nGoodbye.\n" : String
>

Det är verkligen praktiskt när du vill skriva uttryck som sträcker sig över många rader. Det är också mycket användbart att snabbt testa funktioner som du just har definierat. Lägg till följande i din fil: 

f x =
  x + x * x

Spara och gå tillbaka till REPL: 

> f
<function> : number -> number
> f 2
6 : number
> f 4
20 : number
>

Varje gång du ändrar och sparar en fil som du har importerat, och du går tillbaka till REPL och försöker göra någonting, kompileras hela filen igen. Därför kommer den att berätta om något fel i din kod. Lägg till detta: 

c = 2 ++ 2

Försök med det: 

> 0
-- TYPE MISMATCH -------------------------------------------------- ././Test.elm

The left argument of (++) is causing a type mismatch.

22|     2 ++ 2
        ^
(++) is expecting the left argument to be a:

    appendable

But the left argument is:

    number

Hint: Only strings, text, and lists are appendable.


>

För att avsluta denna introduktion till REPL, låt oss lägga till att elm-repl också känner till paketen som du har installerat med elm package install . Till exempel: 

> import Html.App
> Html.App.beginnerProgram
<function>
    : { model : a, update : b -> a -> a, view : a -> Html.Html b }
      -> Platform.Program Basics.Never
>

Local Build Server (Elm Reactor)

Elm Reactor är det viktiga verktyget för att prototypa din applikation.

Observera att du inte kommer att kunna kompilera Main.elm med Elm Reactor om du använder Http.App.programWithFlags eller Ports

Att köra elm-reactor i en projektkatalog startar en webbserver med en projektutforskare, så att du kan sammanställa varje separat komponent.

Alla ändringar du gör i din kod uppdateras när du laddar om sidan. 

$ elm-reactor                     # launch elm-reactor on localhost:8000
$ elm-reactor -a=0.0.0.0 -p=3000  # launch elm-reactor on 0.0.0.0:3000


Modified text is an extract of the original Stack Overflow Documentation
Licensierat under CC BY-SA 3.0
Inte anslutet till Stack Overflow