Skip to content

Latest commit

 

History

History
123 lines (93 loc) · 3.42 KB

README.md

File metadata and controls

123 lines (93 loc) · 3.42 KB
Raw

ejs-loader for webpack

npm Build Status

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.3 - Fix dependency vulnerabilities.
  • 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)