Negligible Psychological Misery

    @groveco/ejs-loader

    1.0.0-beta.1 • Public • Published

    ejs-loader for webpack with ECMAScript Modules

    npm

    -Build Status

    EJS (Underscore/LoDash Templates) loader for webpack compiled as an ECMAScript module. 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 @groveco/ejs-loader

    Usage

    Documentation: Using loaders

    import template from '@groveco/ejs-loader?variable=data!./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

    The variable option is required to compile EJS templates into ES compatible modules. If the variable option is not provided as a loader or query option, an UnsupportedConfiguration Exception will be thrown throw. Please see https://github.com/lodash/lodash/issues/3709#issuecomment-375898111 for additional details

    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 options block to your configuration.

    Example config with Webpack 4+

    module.exports = {
      module: {
        rules: [
          {
            test: /\.ejs$/,
            loader: '@groveco/ejs-loader',
            options: {
              variable: 'data',
              interpolate : '\\{\\{(.+?)\\}\\}',
              evaluate : '\\[\\[(.+?)\\]\\]'
            }
          }
        ]
      }
    };

    is equivalent to

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

    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:

    import mainTemplate from 'ejs!./main.ejs';
    import hyperlinkTemplate from 'ejs!./hyperlink.ejs';
    let 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

    • 1.0.0-beta.1 - Inital fork of ejs-loader with support for ECMA Modules and deprecating CommonsJS
    • 0.3.5 - Fix dependency vulnerabilities.
    • 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

    Contributing Prerequisites

    • Node >= 12.13.0
    • npm >= 6.12.0

    License

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

    Install

    npm i @groveco/ejs-loader

    DownloadsWeekly Downloads

    1

    Version

    1.0.0-beta.1

    License

    MIT

    Unpacked Size

    9.38 kB

    Total Files

    8

    Last publish

    Collaborators

    • noazark