tag-lib-loader
v0.0.3
Published
Riot tag file loader for Webpack
Downloads
13
Readme
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.