lodash-template-module-loader

simple lodash templates loader for webpack, generated as ES modules

lodash-template-module-loader

Webpack loader for Lodash/Underscore templates

Installation

npm install --save-dev lodash-template-module-loader

Usage

Set up the loader in your webpack configuration:

module.exports = {
    //...
    module: {
        rules: [
            {
                test: /(\.tpl\.html)$/,
                loader: 'lodash-template-module-loader',
                options: {
                   // ...
                   // ...
                }
            }
        ]
    }
};

This will allow you to require / import and use templates like this:

template.tpl.html
<h1><%= title %></h1>
myScript.js - with require
var template = require('./path/to/template.tpl.html');
var html = template({
    title: 'Hello world'
});
myScript.js - import
import template from './path/to/template.tpl.html';
const html = template({
    title: 'Hello world'
});

Configuration Options

By default, you get variable interpolation, escaping (_.escape), and evaluation (<%= thing %>, <%- escapedThing %>, and <% if (thing) { %>...<% } %>, respectively).

There are a number of configuration options available ({type} option = default):

  • {boolean} globalEngine = false
  • {string} engine = "lodash"
  • {string} importsModulePath = ""
  • {string} importsName = "imports"
  • {string} prependFilenameComment = ""
  • {RegExp|string} interpolate = /<%=([\s\S]+?)%>/g
  • {RegExp|string} escape = /<%-([\s\S]+?)%>/g
  • {RegExp|string} evaluate = /<%([\s\S]+?)%>/g
  • {string} variable = ""

Templating Engine - "globalEngine" & "engine"

The engine option describes the imported template engine - default: 'lodash'. You can use this to specify 'underscore', if you want.

The globalEngine flag indicates whether Lodash/Underscore's _ is already included globally. The default value is false - results in import statement to include the engine. Set globalEngine: true in your config options to remove the import statement - _ will be presumed to be available for use in your templates.

Template Imports - "importsModulePath" & "importsName"

It is possible to specify a module to use for imports. importsModulePath lets you specify module that exports some template util imports.

module.exports = {
    // ...
    module: {
        rules: [
            {
                test: /(\.tpl\.html)$/,
                loader: 'lodash-template-module-loader',
                options: {
                    importsModulePath: path.join(__dirname, 'template-imports'),
                    // ...
                }
            }
        ]
    },
    // ...
};

The imports module's default export is available as importsDefault, all other named exports are scoped to imports variable (using * as imports).

It is possible to rename the named imports scope setting importsName.

template-imports.js
export function greet(str) {
    return `Hello ${str}`;
};
template.tpl.html
<p><%- imports.greet(name) %> ! ! !</p>
myModule.js
import template from 'path/to/template.tpl.html';
const html = template({name: 'Jon'}); // "<p>Hello Jon ! ! !</p>"

Template Settings - "escape", "evaluate", "interpulate", "variable"

You can modify the regular expressions that Lodash uses for interpolate, escape, and evaluate:

module.exports = {
    // ...
    module: {
        rules: [
            {
                test: /(\.tpl\.html)$/,
                loader: 'lodash-template-module-loader',
                options: {
                    escape: /\{\{(.+?)\}\}/g,
                    evaluate: /\{%([\s\S]+?)%\}/g,
                    interpolate: /\{\\[(.+?)\\]\\}/g,
                    //...
                }
            }
        ]
    },
    // ...
};

You can also specify the variable option, which can be used to namespace the variables you pass into the template:

module.exports = {
    // ...
    module: {
        rules: [
            {
                test: /(\.tpl\.html)$/,
                loader: 'lodash-template-module-loader',
                options: {
                    variable: 'data',
                    // ...
                }
            }
        ]
    },
    // ...
};
template.tpl.html
<h1><%- data.title %></h1>
<p><%- data.description %></p>
myModule.js
import template from './path/to/template.tpl';
const html = template({
    title: 'My Title',
    description: 'Lorem ipsum...',
});

Prepending Filename Comment - "prependFilenameComment"

When debugging using DevTools, it can be hard to find the template in the Elements panel. With the following config an HTML comment is prepended to the template with the relative path in it (e.g. <!-- src/templates/my-view.tpl.html -->).

module.exports = {
    // ...
    module: {
        rules: [
            {
                test: /(\.tpl\.html)$/,
                loader: 'lodash-template-module-loader',
                options: {
                    prependFilenameComment: process.cwd(),
                    // ...
                }
            }
        ]
    },
    // ...
};

License

MIT License


This project is inspired by lodash-template-webpack-loader.

So why another loader?

Please see motivation.

HomePage

https://github.com/ohadTsarfati/lodash-template-module-loader

Repository

git+https://github.com/ohadTsarfati/lodash-template-module-loader.git


公众号

欢迎 JavaScript 爱好者