RIOT.JS - Configuration de l'environnement

Il existe deux manières d'utiliser RIOT js.

  • Local Installation - Vous pouvez télécharger la bibliothèque RIOT sur votre machine locale et l'inclure dans votre code HTML.

  • CDN Based Version - Vous pouvez inclure la bibliothèque RIOT dans votre code HTML directement à partir du Content Delivery Network (CDN).

Installation locale

  • Aller au https://riot.js.org/download/ pour télécharger la dernière version disponible.

  • Maintenant mis téléchargé riot.min.js fichier dans un répertoire de votre site Web, par exemple / riotjs.

Exemple

Vous pouvez maintenant inclure la bibliothèque riotjs dans votre fichier HTML comme suit -

<!DOCTYPE html>
<html>
   <head>
      <script src = "/riotjs/riot.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <messageTag></messageTag>
      <script>
         var tagHtml = "<h1>Hello World!</h1>";
         riot.tag("messageTag", tagHtml);
         riot.mount("messageTag");
      </script>
   </body>
</html>

Cela produira le résultat suivant -

Version basée sur CDN

Vous pouvez inclure la bibliothèque RIOT js dans votre code HTML directement à partir du Content Delivery Network (CDN). Google et Microsoft fournissent du contenu pour la dernière version.

Note - Nous utilisons la version CDNJS de la bibliothèque tout au long de ce tutoriel.

Exemple

Maintenant, réécrivons l'exemple ci-dessus en utilisant la bibliothèque jQuery de CDNJS.

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <messageTag></messageTag>
      <script>
         var tagHtml = "<h1>Hello World!</h1>";
         riot.tag("messageTag", tagHtml);
         riot.mount("messageTag");
      </script>
   </body>
</html>

Cela produira le résultat suivant -