RIOT.JS-環境設定

RIOTjsを使用する方法は2つあります。

  • Local Installation − RIOTライブラリをローカルマシンにダウンロードして、HTMLコードに含めることができます。

  • CDN Based Version − RIOTライブラリをコンテンツ配信ネットワーク(CDN)から直接HTMLコードに含めることができます。

ローカルインストール

  • に移動します https://riot.js.org/download/ 利用可能な最新バージョンをダウンロードします。

  • 今すぐダウンロードしてください riot.min.js / riotjsなど、Webサイトのディレクトリにあるファイル。

これで、次のようにriotjsライブラリをHTMLファイルに含めることができます-

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

これにより、次の結果が生成されます-

CDNベースのバージョン

コンテンツ配信ネットワーク(CDN)から直接、RIOTjsライブラリをHTMLコードに含めることができます。GoogleとMicrosoftは、最新バージョンのコンテンツ配信を提供しています。

Note −このチュートリアルでは、CDNJSバージョンのライブラリを使用しています。

CDNJSのjQueryライブラリを使用して上記の例を書き直してみましょう。

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

これにより、次の結果が生成されます-