Compiling riot.js tags using Webpack and Babel 6

3 min read.

We’ve started working with riot.js at work and so far it have been great. Last weekend I decided that it would be nice to update our dependencies in the project. As usual I thought to myself, how hard can it be? And as always, it’s usually not as easy as it seems from the start.

We use webpack as a build tool and the riotjs-loader for compiling the riot tags into JavaScript.

We had some issues around using riotjs with Babel 6 but with riotjs >= 2.3.11 you have the option of using Babel 6 with the riot.js compiler.

To use Babel 6 with riot you will have to install babel-core, the babel-preset-es2015-riot preset and create a .babelrc in the project root containing { "presets": ["es2015-riot"] }.

In Babel 6 all the new features have been moved into separate plugins for Babel. It makes your Babel setup more customizable however a bit harder to setup. A preset will define all the necessary plugins for you.

In the end, our package.json ended up looking something like this:

/* package.json */
...
"devDependencies": {
    "babel-core": "^6.2.1",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015-riot": "*",
    "riotjs-loader": "^1.2.0",
    "webpack": "^1.12.6",
    "webpack-dev-server": "^1.12.1"
    ...
}
...

For some reason, we had to also add each Babel plugin as a dependency to our project. I’m not sure if that is something everyone have to do, but it will tell you which ones are missing when you try to run Babel.

We added the following plugins to our package.json:

	"babel-plugin-transform-es2015-arrow-functions": "^6.3.13",
    "babel-plugin-transform-es2015-block-scoped-functions": "^6.3.13",
    "babel-plugin-transform-es2015-classes": "^6.3.15",
    "babel-plugin-transform-es2015-function-name": "^6.3.21",
    "babel-plugin-transform-es2015-literals": "^6.3.13",
    "babel-plugin-transform-es2015-object-super": "^6.3.13",
    "babel-plugin-transform-es2015-shorthand-properties": "^6.3.13",
    "babel-plugin-transform-es2015-template-literals": "^6.3.13",
    "babel-plugin-transform-es2015-computed-properties": "^6.3.13",
    "babel-plugin-transform-es2015-for-of": "^6.3.13",
    "babel-plugin-transform-es2015-sticky-regex": "^6.3.13",
    "babel-plugin-transform-es2015-unicode-regex": "^6.3.13",
    "babel-plugin-check-es2015-constants": "^6.3.13",
    "babel-plugin-transform-es2015-spread": "^6.3.13",
    "babel-plugin-transform-es2015-parameters": "^6.3.13",
    "babel-plugin-transform-es2015-destructuring": "^6.3.13",
    "babel-plugin-transform-es2015-block-scoping": "^6.3.13",
    "babel-plugin-transform-es2015-typeof-symbol": "^6.3.13",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.3.13",

You will also want to make sure you use the type babel on the script tags in your riot.js tags. Like so:

<my-tag>
 <p>this is my tag</p>
 <script type="babel">
   ...
 </script>
</my-tag>

Or if you are if you are using the riotjs-loader with webpack you can omit the type attribute on the script tag and specify the type in the query, like so:

/* webpack.config.js */
...
module: {
    preLoaders: [
      {
        test: /\.tag$/,
        exclude: /node_modules/,
        loader: 'riotjs-loader',
        query: {
          type: 'babel' /* specify type */
        }
      }
    ],
    loaders: [
      ...
   ]
}
...

The reason for this is that if you use type=“es6” it still expects Babel 5 dependencies.

You should now be able to compile your riot.js tags using Babel 6. If you have any questions or issues, write a comment below or let me know on Twitter.

comments powered by Disqus