Elm - Menedżer pakietów

Menedżer pakietów to narzędzie wiersza poleceń, które automatyzuje proces instalowania, uaktualniania, konfigurowania i usuwania pakietów w aplikacji.

Podobnie jak JavaScript ma menedżera pakietów o nazwie npm, elm ma menedżera pakietów o nazwie elm-package .

Menedżer pakietów wykonuje następujące trzy zadania -

Instaluje wszystkie zależności, których potrzebuje aplikacja elm
Publikuje pakiety niestandardowe
Określa wersję pakietu, gdy jesteś gotowy do publikacji i aktualizacji.

Polecenia programu Elm Package Manager

Poniższa tabela zawiera listę różnych poleceń menedżera pakietów Elm -

Sr. No.	Komenda	Składnia	Opis
1	zainstalować	instalacja pakietu elm	Instaluje pakiety do użytku lokalnego
2	publikować	publikacja pakietu elm	Publikuje twój pakiet w katalogu centralnym
3	guz	wypukłość pakietu elm	Zwiększa numery wersji w oparciu o zmiany interfejsu API
4	różn	Różnica w pakiecie elm	Pobiera różnice między dwoma interfejsami API

Aby opublikować swój pakiet, musisz hostować kod źródłowy na GitHub i mieć odpowiednią wersję oznaczoną tagiem git. Poniższa ilustracja pokazuje, jak używać menedżera pakietów elm do ściągania zależności zewnętrznych.

Ilustracja - Instalowanie pakietu svg

W tym przykładzie zobaczymy, jak zintegrować skalowalną grafikę wektorową (SVG) z aplikacją elm.

Step 1 - Utwórz folder elmSvgApp

Step 2 - Zainstaluj pakiet svg za pomocą następującego polecenia -

elm-package install elm-lang/svg

Step 3- Zainstaluj Utwórz plik SvgDemo.elm i wpisz zawartość podaną poniżej. Importujemy moduł Svg, aby narysować prostokąt o wymiarach 100x100 i wypełnić kolorem czerwonym.

import Svg exposing (..)
import Svg.Attributes exposing (..)

main =
   svg
   [ width "120"
   , height "120"
   , viewBox "0 0 120 120"
   ]
   [ rect
      [ x "10"
      , y "10"
      , width "100"
      , height "100"
      , rx "15"
      , ry "15"
      ,fill "red"
      ]
      []
   ]

Step 4- Teraz skompiluj projekt używając elm make. \ SvgDemo.elm. Spowoduje to wygenerowanie pliku index.html, jak pokazano poniżej -