MomentJS - Konfiguracja środowiska
W tym rozdziale dowiesz się szczegółowo, jak skonfigurować środowisko pracy MomentJS na komputerze lokalnym. Zanim zaczniesz pracować nad MomentJS, musisz mieć dostęp do biblioteki. Możesz uzyskać dostęp do jego plików za pomocą dowolnej z następujących metod -
Metoda 1: użycie pliku MomentJS w przeglądarce
W tej metodzie będziemy potrzebować pliku MomentJS z jego oficjalnej strony internetowej i będziemy go używać bezpośrednio w przeglądarce.
Krok 1
W pierwszej kolejności przejdź do oficjalnej strony internetowej MomentJS https://momentjs.comZnajdziesz stronę główną, jak pokazano tutaj -
Zwróć uwagę, że dostępna jest opcja pobierania, która udostępnia najnowszy dostępny plik MomentJS. Zwróć uwagę, że plik jest dostępny z minifikacją i bez.
Krok 2
Teraz uwzględnij moment.js w środku scripttag i rozpocznij pracę z MomentJS. W tym celu możesz użyć kodu podanego poniżej -
<script type = "text/JavaScript" src = " https://MomentJS.com/downloads/moment.js"></script>
Podano tutaj działający przykład i jego wyniki dla lepszego zrozumienia -
Przykład
<html>
<head>
<title>MomentJS - Working Example</title>
<script type = "text/JavaScript" src = "https://MomentJS.com/downloads/moment.js"></script>
<style>
div {
border: solid 1px #ccc;
padding:10px;
font-family: "Segoe UI",Arial,sans-serif;
width: 50%;
}
</style>
</head>
<body>
<div style = "font-size:25px" id = "todaysdate"></div>
<script type = "text/JavaScript">
var a = moment().toString();
document.getElementById("todaysdate").innerHTML = a;
</script>
</body>
</html>
Wynik
Plik moment-localeplik do pracy z różnymi lokalizacjami jest również dostępny, jak pokazano na powyższym zrzucie ekranu. Teraz dodaj plik do tagu script, jak pokazano poniżej i pracuj z różnymi wybranymi lokalizacjami. W tym celu możesz użyć kodu podanego poniżej -
<script type="text/JavaScript" src="https://MomentJS.com/downloads/moment-with-locales.js"></script>
Podano tutaj działający przykład dla lokalizacji momentu i jego danych wyjściowych dla lepszego zrozumienia -
<html>
<head>
<script type = "text/JavaScript" src ="https://MomentJS.com/downloads/moment-with-locales.js"></script>
</head>
<body>
<h1>Moment Locale</h1>
<div id = "datedisplay" style = "font-size:30px;"></div>
<script type = "text/JavaScript">
var a = moment.locale("fr");
var c = moment().format("LLLL");
document.getElementById("datedisplay").innerHTML = c;
</script>
</body>
</html>
Wynik
Metoda 2: Korzystanie z Node.js.
Jeśli decydujesz się na tę metodę, upewnij się, że masz Node.js i npmzainstalowany w twoim systemie. Możesz użyć następującego polecenia, aby zainstalować MomentJS -
npm install moment
Po pomyślnym zainstalowaniu MomentJS możesz zobaczyć następujące dane wyjściowe -
Teraz, aby sprawdzić, czy MomentJS działa dobrze z Node.js, utwórz plik test.js i dodaj do niego następujący kod -
var moment = require('moment');
var a = moment().toString();
console.log(a);
Teraz w wierszu polecenia uruchom polecenie węzeł test.js, jak pokazano na zrzucie ekranu podanym poniżej -
Zauważ, że to polecenie wyświetla dane wyjściowe dla moment().toString().
Metoda 3: Korzystanie z Bower
Bower to kolejna metoda na pobranie wymaganych plików dla MomentJS. Możesz użyć następującego polecenia, aby zainstalować MomentJS za pomocą Bower -
bower install --save moment
Poniższy zrzut ekranu przedstawia instalację MomentJS przy użyciu Bower -
To są pliki załadowane z Bower do zainstalowania MomentJS. Zainstalowany moment i pliki lokalizacyjne są pokazane na poniższym obrazku -