# ejs-loader

> EJS (Underscore/LoDash Templates) loader for webpack

Latest version **0.5.0** (published 2020-06-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install ejs-loader
pnpm add ejs-loader
yarn add ejs-loader
bun add ejs-loader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.0 |
| Published | 2020-06-10 |
| First published | 2014-06-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 10.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 157 |
| Author | Andrey Okonetchnikov |
| Maintainers | difelice, okonet |
| Keywords | ejs, underscore, lodash, _, webpack, loader, template |

## Links

- npm: https://www.npmjs.com/package/ejs-loader
- Repository: https://github.com/difelice/ejs-loader
- Issues: https://github.com/difelice/ejs-loader/issues
- npm.io page: https://npm.io/package/ejs-loader

## Dependencies (2)

- [lodash](https://npm.io/package/lodash.md) ^4.17.15
- [loader-utils](https://npm.io/package/loader-utils.md) ^2.0.0

## Alternatives

- [lodash.assign](https://npm.io/package/lodash.assign.md) — 2.3M weekly downloads
- [lodash.chunk](https://npm.io/package/lodash.chunk.md) — 1.8M weekly downloads
- [react-native-ios-utilities](https://npm.io/package/react-native-ios-utilities.md) — 138.5K weekly downloads
- [@technically/lodash](https://npm.io/package/@technically/lodash.md) — 50.9K weekly downloads
- [@fluid-topics/ft-icon](https://npm.io/package/@fluid-topics/ft-icon.md) — 20.6K weekly downloads

## Recent versions

- 0.5.0 (latest) — 2020-06-10
- 0.4.1 — 2020-06-02
- 0.4.0 — 2020-06-02
- 0.3.7 — 2020-06-02
- 0.3.6 — 2020-03-29
- 0.3.5 — 2019-09-25
- 0.3.4 — 2019-09-25
- 0.3.3 — 2019-03-26
- 0.3.1 — 2018-03-01
- 0.3.0 — 2016-06-08
- 0.2.1 — 2015-04-13
- 0.1.0 — 2014-06-13

## README

# ejs-loader for webpack

[![npm](https://img.shields.io/npm/v/ejs-loader.svg)](https://www.npmjs.com/package/ejs-loader)
[![Build Status](https://travis-ci.com/difelice/ejs-loader.svg)](https://travis-ci.com/difelice/ejs-loader)

EJS (Underscore/LoDash Templates) loader for [webpack](http://webpack.github.io/). Uses [lodash template](http://lodash.com/docs#template) function to compile templates.

If you are looking for the loader which uses [EJS templating engine](https://github.com/tj/ejs), there is [ejs-compiled-loader](https://github.com/bazilio91/ejs-compiled-loader)

## Installation

`npm install ejs-loader`

## Usage

[Documentation: Using loaders](http://webpack.github.io/docs/using-loaders.html)

``` javascript
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](http://underscorejs.org/#template)/[Lodash](https://lodash.com/docs#template) options can be passed in using the querystring or adding an ```esjLoader``` options block to your configuration.

Config example with Webpack 4+
``` js
module.exports = {
  module: {
    rules: [
      {
        test: /\.ejs$/,
        loader: 'ejs-loader',
        options: {
          variable: 'data',
          interpolate : '\\{\\{(.+?)\\}\\}',
          evaluate : '\\[\\[(.+?)\\]\\]'
        }
      }
    ]
  }
};
```

Config example using a querystring ([deprecated](https://webpack.js.org/concepts/loaders/#loader-features)):
``` js
module.exports = {
  module: {
    loaders: [
      { test: /\.ejs$/, loader: 'ejs-loader?variable=data' },
    ]
  }
};
```
is equivalent to
``` js
var template = _.template('<%= template %>', { variable : 'data' });
```

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

Config example using the ```ejsLoader``` config block ([deprecated](https://webpack.js.org/concepts/loaders/#loader-features)):
``` js
module.exports = {
  module: {
    loaders: [
      { test: /\.ejs$/, loader: 'ejs-loader' }
    ]
  },
  ejsLoader : {
    variable    : 'data',
    interpolate : /\{\{(.+?)\}\}/g,
    evaluate    : /\[\[(.+?)\]\]/g
  }
};
```

#### Export as CommonJS
By default, `ejs-loader` generates JS modules that use the ES modules syntax. There are some cases in which using ES modules is beneficial, like in the case of [module concatenation](https://webpack.js.org/plugins/module-concatenation-plugin/) and [tree shaking](https://webpack.js.org/guides/tree-shaking/).

You can enable a CommonJS module syntax using:

Config example with Webpack 4+
``` js
module.exports = {
  module: {
    rules: [
      {
        test: /\.ejs$/,
        loader: 'ejs-loader',
        options: {
          esModule: false
        }
      }
    ]
  }
};
```

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](https://webpack.js.org/concepts/loaders/#loader-features), an `Error` will be thrown. Please see https://github.com/lodash/lodash/issues/3709#issuecomment-375898111 for additional details.


### Including nested templates

Lodash template function does not provide `include` method of [ejs module](http://ejs.co/). 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.5.0 - Changed `exportAsESM` flag to `esModule` and enabled this behavior by default to be consistent with other webpack loaders.
* 0.4.1 - Add default object for options to prevent breakages when the webpack query object is null 
* 0.4.0 - Add support for ESModules with the `exportAsESM` flag
* 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

## License

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

---
_Source: https://npm.io/package/ejs-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._