tag-lib-loader v0.0.3

Introduction

This is a fork from srackham. Motivation is to create a webpack loader bundling tags only, excluding the riot library. This allows one to bundle a collection of tags that can be loaded dynamically.

Change applied is the removal of the riot.js dependency in the output, half a line from the original.

Dependencies

The following libraries (and versions) were tested:

• riot 3.5.1 (bundling)/ 3.6.0 (in-browser compiler)
• tag-lib-loader 0.0.2
• webpack 2.6.1

Example 1

Purpose: dynamic loading of bundled tags Run:

• npm run-script build
• npm run-script dev

Open browser to http://localhost:8080/index.htm

Example 2

Purpose: prioritised loading (above-the-fold) of a page.

Riot tag file loader for Webpack

Webpack can use this loader to automatically compile Riot tag files. Inspired by this GitHub Gist.

Install

npm install tag-loader --save-dev

webpack.config.js Configuration

  :
module: {
loaders: [
  { test: /\.tag$/, loader: 'tag' },
    :
]
}
  :

Use query parameters to include Riot compiler command options. Examples:

{ test: /\.tag$/, loader: 'tag?compact' },
{ test: /\.tag$/, loader: 'tag', query: {compact: 'true'} },

See also the Webpack loader documentation.

ES5 projects

Once you've installed and configured the tag-loader you can require Riot tag files into your project using the require() function e.g.

require('./tags.tag');

ES6 projects

Once you've installed and configured the tag-loader and 6to5-loader you can import Riot tag files into your project using the ES6 module import statement e.g.

import './tags.tag'

NOTE: I do not recommend using ES6 code inside Riot tag files, here's why.