Getting Started With Riot.js Part2 -Tutorial Savvy

In my previous post we have learnt the basics of Riot.js framework.We have also developed a simple tag which is compiled in browser.
In this demo,”We will learn to precompile the custom tags in Riot.js”.
To precompile Riot.js tags we need to install Riot in global scope using npm install riot –g command in terminal.The following screenshot shows the terminal with riot global installation.

To demonstrate the precompilation of Riot.js tag we have modified the file structure.We have created 2 new directories named dev and out.The dev directory contains the Riot.js custom tag definition and out directory will contains the compiled version of custom tag.Also we have moved the code definition for <my-name> tag to dev/my-name.tag file.
Now we can generated the compiled version of dev/my-name.tag into out/my-name-tag.js file using riot dev/my-name.tag out/my-name-tag.js command.The following screenshot shows the riot compilation.

The modified directory structure looks like following screenshot.We can see the my-name-tag.js file is generated in out directory.

The content of my-name-tag.js file is as follows with precompiled code.

riot.tag('my-name', '<h1>My Name is: {text}</h1>', function(opts) {
    this.text="Sandeep"

});

Now we need to modify the index.html file.The modified index.html file looks like following code.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Riot.js Demo part2</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.0.15/riot.min.js"></script>
    <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.0.5/es5-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script>html5.addElements('todo')</script>
    <![endif]-->
    <script src="out/my-name-tag.js"></script>
</head>
<body>
    <my-name></my-name>

    <script>
        riot.mount('my-name');
    </script>
</body>
</html>