MomentJS - Настройка среды
В этой главе вы подробно узнаете о настройке рабочей среды MomentJS на вашем локальном компьютере. Прежде чем вы начнете работать над MomentJS, вам необходимо иметь доступ к библиотеке. Вы можете получить доступ к его файлам любым из следующих методов -
Метод 1: использование файла MomentJS в браузере
В этом методе нам понадобится файл MomentJS с официального сайта, и мы будем использовать его прямо в браузере.
Шаг 1
В качестве первого шага перейдите на официальный сайт MomentJS. https://momentjs.comВы найдете домашнюю страницу, как показано здесь -
Обратите внимание, что есть вариант загрузки, который дает вам последний доступный файл MomentJS. Обратите внимание, что файл доступен с минимизацией и без нее.
Шаг 2
Теперь включите moment.js внутри scripttag и начните работать с MomentJS. Для этого вы можете использовать приведенный ниже код -
<script type = "text/JavaScript" src = " https://MomentJS.com/downloads/moment.js"></script>
Ниже приводится рабочий пример и его результат для лучшего понимания -
пример
<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>
Вывод
В moment-localeфайл для работы с разными языками также доступен, как показано на скриншоте выше. Теперь добавьте файл в тег скрипта, как показано ниже, и работайте с различными языковыми стандартами по вашему выбору. Для этого вы можете использовать приведенный ниже код -
<script type="text/JavaScript" src="https://MomentJS.com/downloads/moment-with-locales.js"></script>
Ниже приведен рабочий пример для локали момента и его вывод для лучшего понимания -
<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>
Вывод
Метод 2: Использование Node.js
Если вы выбираете этот метод, убедитесь, что у вас есть Node.js и npmустановлен в вашей системе. Вы можете использовать следующую команду для установки MomentJS -
npm install moment
После успешной установки MomentJS вы можете увидеть следующий результат:
Теперь, чтобы проверить, нормально ли MomentJS работает с Node.js, создайте файл test.js и добавьте в него следующий код:
var moment = require('moment');
var a = moment().toString();
console.log(a);
Теперь в командной строке запустите команду node test.js, как показано на скриншоте ниже -
Обратите внимание, что эта команда отображает вывод для moment().toString().
Метод 3: Использование Bower
Bower - еще один способ получить необходимые файлы для MomentJS. Вы можете использовать следующую команду для установки MomentJS с помощью Bower -
bower install --save moment
На приведенном ниже снимке экрана показана установка MomentJS с использованием Bower -
Это файлы, загруженные из Bower для установки MomentJS. Установленный момент и файлы локали показаны на изображении, приведенном ниже -