MomentJS - Configuration de l'environnement

Dans ce chapitre, vous apprendrez en détail comment configurer l'environnement de travail de MomentJS sur votre ordinateur local. Avant de commencer à travailler sur MomentJS, vous devez avoir accès à la bibliothèque. Vous pouvez accéder à ses fichiers dans l'une des méthodes suivantes -

Méthode 1: Utilisation du fichier MomentJS dans le navigateur

Dans cette méthode, nous allons avoir besoin du fichier MomentJS de son site officiel et l'utiliser directement dans le navigateur.

Étape 1

Dans un premier temps, rendez-vous sur le site officiel de MomentJS https://momentjs.comVous trouverez la page d'accueil comme indiqué ici -

Notez qu'il existe une option de téléchargement disponible qui vous donne le dernier fichier MomentJS disponible. Notez que le fichier est disponible avec et sans minification.

Étape 2

Maintenant, incluez moment.js à l'intérieur de scripttag et commencez à travailler avec MomentJS. Pour cela, vous pouvez utiliser le code ci-dessous -

<script type = "text/JavaScript" src = " https://MomentJS.com/downloads/moment.js"></script>

Voici un exemple de travail et sa sortie pour une meilleure compréhension -

Exemple

<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>

Production

le moment-localeLe fichier pour travailler avec différents paramètres régionaux est également disponible, comme indiqué dans la capture d'écran ci-dessus. Maintenant, ajoutez le fichier à la balise de script comme indiqué ci-dessous et travaillez avec différents paramètres régionaux de votre choix. Pour cela, vous pouvez utiliser le code ci-dessous -

<script type="text/JavaScript" src="https://MomentJS.com/downloads/moment-with-locales.js"></script>

Voici un exemple de travail pour moment-locale et sa sortie pour une meilleure compréhension -

<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>

Production

Méthode 2: Utilisation de Node.js

Si vous optez pour cette méthode, assurez-vous d'avoir Node.js et npminstallé sur votre système. Vous pouvez utiliser la commande suivante pour installer MomentJS -

npm install moment

Vous pouvez observer la sortie suivante une fois que MomentJS est installé avec succès -

Maintenant, pour tester si MomentJS fonctionne correctement avec Node.js, créez le fichier test.js et ajoutez-y le code suivant -

var moment = require('moment');
var a = moment().toString();
console.log(a);

Maintenant, dans l'invite de commande, exécutez le noeud de commande test.js comme indiqué dans la capture d'écran ci-dessous -

Notez que cette commande affiche la sortie pour moment().toString().

Méthode 3: Utilisation de Bower

Bower est une autre méthode pour obtenir les fichiers requis pour MomentJS. Vous pouvez utiliser la commande suivante pour installer MomentJS en utilisant Bower -

bower install --save moment

La capture d'écran ci-dessous montre l'installation de MomentJS en utilisant Bower -

Ce sont les fichiers chargés depuis Bower pour MomentJS à installer. Les fichiers de moment et de paramètres régionaux installés sont affichés dans l'image ci-dessous -