EJS (Underscore/LoDash Templates) loader for webpack
JavaScript
Latest commit c76794e Sep 11, 2016 @okonet committed on GitHub Merge pull request #14 from axelpale/patch-1
Added instructions on implementing nested templates
Permalink
Failed to load latest commit information.
.gitignore Initial commit May 20, 2014
LICENSE Initial commit May 20, 2014
README.md Added instructions on implementing nested templates Sep 11, 2016
index.js allow for regex by using options May 31, 2016
package.json 0.3.0 Jun 8, 2016

README.md

ejs-loader for webpack

EJS (Underscore/LoDash Templates) loader for webpack. Uses lodash template function to compile templates.

If you are looking for the loader which uses EJS templating engine, there is ejs-compiled-loader

Installation

npm install ejs-loader

Usage

Documentation: Using loaders

var template = require("ejs!./file.ejs");
// => returns the template function compiled with undesrcore (lodash) templating engine.

// And then use it somewhere in your code
template(data) // Pass object with data

You also should provide a global _ variable with the lodash/underscore runtime. You can do it with the following webpack plugin: https://github.com/webpack/docs/wiki/list-of-plugins#provideplugin

plugins: [
    new webpack.ProvidePlugin({
        _: "underscore"
    })
]

Options

Underscore/Lodash options can be passed in using the querystring or adding an esjLoader options block to your configuration.

Config example using a querystring:

module.exports = {
  module: {
    loaders: [
      { test: /\.ejs$/, loader: 'ejs-loader?variable=data' },
    ]
  }
};

is equivalent to

var template = _.template('<%= template %>', { variable : 'data' });
module.exports = {
    module: {
        loaders: [
            {
                test: /\.ejs$/, 
                loader: 'ejs-loader', 
                query: { 
                    variable: 'data', 
                    interpolate : '\\{\\{(.+?)\\}\\}', 
                    evaluate : '\\[\\[(.+?)\\]\\]' 
                }
            },
        ]
    }
};

is equivalent to

var template = _.template('<%= template %>', { variable: 'data', interpolate : '\\{\\{(.+?)\\}\\}', evaluate : '\\[\\[(.+?)\\]\\]' });

Config example using the ejsLoader config block:

module.exports = {
  module: {
    loaders: [
      { test: /\.ejs$/, loader: 'ejs-loader',
    ]
  },
  ejsLoader : {
    variable    : 'data',
    interpolate : /\{\{(.+?)\}\}/g,
    evaluate    : /\[\[(.+?)\]\]/g
  }
};

Including nested templates

Lodash template function does not provide include method of ejs module. To include other templates, passing template functions as parameters does the job. For example:

index.js:

var mainTemplate = require('ejs!./main.ejs');
var hyperlinkTemplate = require('ejs!./hyperlink.ejs');
var renderedHtml = mainTemplate({ hyperlink: hyperlinkTemplate });

main.ejs:

<h1><%= hyperlink({ name: 'Example', url: 'http://example.com' }) %></h1>

hyperlink.ejs:

<a href="<%= url %>"><%= name %></a>

As a result, renderedHtml becomes a string <h1><a href="http://example.com">Example</a></h1>.

Release History

  • 0.3.0 - Allow passing template options via ejsLoader or via loader's query
  • 0.2.1 - Add ability to pass compiller options
  • 0.1.0 - Initial release

License

MIT (http://www.opensource.org/licenses/mit-license.php)